如何在Chrome扩展中发送网络请求且规避CORS问题（不使用CORS代理）

Chrome扩展本身提供了多种无需第三方CORS代理的方案来规避跨域限制，核心是利用扩展的权限机制或内置API，以下是几种实用方案：

1. 利用后台脚本+权限配置（最推荐） #

Chrome扩展的后台脚本（Manifest V3中为Service Worker）不受前端页面的CORS限制，只要在manifest.json中配置目标域名的权限，即可直接发送请求。

步骤： #

• 配置manifest.json，添加目标域名的host_permissions：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "host_permissions": [
    "https://目标API域名.com/*" // 替换为实际要请求的域名，支持通配符
  ],
  "background": {
    "service_worker": "background.js"
  }
}

• 在background.js中直接发送网络请求：

// background.js
async function fetchTargetData() {
  try {
    const response = await fetch('https://目标API域名.com/接口路径');
    const data = await response.json();
    console.log('请求结果:', data);
    // 可通过消息传递将数据传给内容脚本或弹出页
  } catch (error) {
    console.error('请求失败:', error);
  }
}

// 触发请求（比如扩展启动时或收到消息时）
fetchTargetData();

如果需要在内容脚本/弹出页发起请求，可通过消息传递让后台脚本代劳：

• 内容脚本发送请求指令：

// content.js
chrome.runtime.sendMessage({ type: 'FETCH_DATA' }, (response) => {
  if (response.success) {
    console.log('获取到数据:', response.data);
  } else {
    console.error('请求出错:', response.error);
  }
});

• 后台脚本监听消息并处理请求：

// background.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'FETCH_DATA') {
    fetch('https://目标API域名.com/接口路径')
      .then(res => res.json())
      .then(data => sendResponse({ success: true, data }))
      .catch(err => sendResponse({ success: false, error: err.message }));
    return true; // 标记为异步响应
  }
});

2. 使用declarativeNetRequest修改请求头 #

部分CORS问题是由于请求头不符合目标网站校验规则导致的（比如Origin头不匹配），可通过Chrome的declarativeNetRequestAPI修改请求头来绕过限制。

步骤： #

• 配置manifest.json，添加权限和规则文件：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["declarativeNetRequest"],
  "declarative_net_request": {
    "rule_resources": [
      {
        "id": "cors_fix_rules",
        "enabled": true,
        "path": "rules.json"
      }
    ]
  }
}

• 创建rules.json定义修改规则：

[
  {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "modifyHeaders",
      "requestHeaders": [
        {
          "header": "Origin",
          "operation": "set",
          "value": "https://目标API域名.com" // 设置为目标网站允许的Origin
        }
      ]
    },
    "condition": {
      "urlFilter": "https://目标API域名.com/*",
      "resourceTypes": ["xmlhttprequest", "fetch"]
    }
  }
]

3. 弹出页直接发起请求 #

如果你的请求是在扩展的弹出页（Popup）中触发，只需在manifest.json中配置对应的host_permissions，弹出页的脚本即可直接发送请求，无需额外处理：

// popup.js
document.getElementById('fetch-btn').addEventListener('click', async () => {
  const response = await fetch('https://目标API域名.com/接口路径');
  const data = await response.json();
  console.log(data);
});

内容的提问来源于stack exchange，提问作者MG95