如何通过Chrome WebRequest API解除CORS限制并为指定站点跨域请求添加响应头

好的，我来帮你搞定这个问题，顺便看看你写的代码有没有需要调整的地方～

核心思路 #

要解决www.example.com向www.google.com发起跨域请求的CORS限制，核心就是通过Chrome的WebRequest API拦截目标域名（也就是www.google.com）的响应，手动添加/修改CORS相关的响应头，让浏览器认为这个跨域请求是被允许的。

你的代码片段需要调整的地方 #

你写的代码逻辑方向是对的，但有几个细节需要修正：

1. 代码不完整：缺少chrome.webRequest.onHeadersReceived.addListener的完整包裹结构；
2. 拦截范围太广：你用了<all_urls>，这会给所有站点的响应加CORS头，完全没必要，应该只针对www.google.com的响应；
3. 没有处理重复头：如果目标响应已经存在Access-Control-Allow-Origin，直接push会导致多个相同头，可能引发浏览器报错；
4. 没有校验请求来源：没判断请求是不是来自www.example.com，会给其他站点向google.com的请求也加头，不安全。

完整的正确实现方案 #

第一步：配置Manifest文件（以Chrome扩展V3为例） #

首先需要在扩展的manifest.json里声明必要的权限和宿主权限：

{
  "manifest_version": 3,
  "name": "Example.com CORS Fixer",
  "version": "1.0",
  "permissions": ["webRequest", "webRequestBlocking"],
  "host_permissions": ["https://www.google.com/*", "https://www.example.com/*"],
  "background": {
    "service_worker": "background.js"
  }
}

• webRequest和webRequestBlocking是拦截响应头必须的权限；
• host_permissions要包含发起请求的站点（example.com）和被请求的站点（google.com）；
• 如果用的是Chrome扩展V2，把background的service_worker改成scripts: ["background.js"]即可。

第二步：编写Background脚本 #

在background.js里实现拦截和修改响应头的逻辑：

chrome.webRequest.onHeadersReceived.addListener(
  (details) => {
    // 只处理来自www.example.com的请求，避免影响其他站点
    if (details.initiator !== "https://www.example.com") {
      return;
    }

    let responseHeaders = details.responseHeaders;

    // 处理Access-Control-Allow-Origin：存在则替换，不存在则添加
    let originHeaderExists = false;
    for (const header of responseHeaders) {
      if (header.name.toLowerCase() === "access-control-allow-origin") {
        header.value = "https://www.example.com";
        originHeaderExists = true;
        break;
      }
    }
    if (!originHeaderExists) {
      responseHeaders.push({
        name: "Access-Control-Allow-Origin",
        value: "https://www.example.com"
      });
    }

    // 处理Access-Control-Allow-Credentials：同理，避免重复
    let credentialsHeaderExists = false;
    for (const header of responseHeaders) {
      if (header.name.toLowerCase() === "access-control-allow-credentials") {
        header.value = "true";
        credentialsHeaderExists = true;
        break;
      }
    }
    if (!credentialsHeaderExists) {
      responseHeaders.push({
        name: "Access-Control-Allow-Credentials",
        value: "true"
      });
    }

    // 返回修改后的响应头
    return { responseHeaders };
  },
  { urls: ["https://www.google.com/*"] }, // 只拦截google.com的响应
  ["blocking", "responseHeaders", "extraHeaders"] // V3需要extraHeaders才能修改这些头
);

关键细节说明 #

• 用details.initiator校验请求来源：确保只有www.example.com发起的请求才会被处理，更安全；
• 先检查再添加/替换头：避免重复的CORS头导致浏览器报错；
• 精准拦截目标域名：只针对www.google.com的响应，不会影响其他站点的正常请求。

这样配置后，当www.example.com向www.google.com发起XHR请求时，Chrome会自动拦截google.com的响应，添加/修改对应的CORS头，从而解除跨域限制啦～

内容的提问来源于stack exchange，提问作者naham 3k