Chrome扩展程序Service Worker中Fetch请求的Origin头修改问题

• 用扩展后台页面做代理
  Service Worker没法直接绕过CORS限制的话，把请求转去扩展的后台页面处理就行——后台脚本发起的请求不受CORS约束，这是扩展的权限优势。具体操作：

1. 在Service Worker里发消息给后台页面，带上请求的URL、请求方法、参数这些信息
2. 后台页面收到消息后，用fetch发起请求，拿到响应再回传给Service Worker
   示例代码：
   Service Worker端：

chrome.runtime.sendMessage({
  type: 'proxyRequest',
  url: 'https://第三方域名/api',
  options: { method: 'GET' }
}, (response) => {
  // 处理返回的响应数据
});

后台页面端：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'proxyRequest') {
    fetch(message.url, message.options)
      .then(res => res.json())
      .then(data => sendResponse(data))
      .catch(err => sendResponse({ error: err.message }));
    return true; // 保持消息通道开放，等待异步请求完成
  }
});

• 配置扩展权限清单
  在manifest.json里加目标第三方域名的权限，这样扩展发起的请求会被浏览器当成同源请求，不会触发严格的CORS检查。示例配置：

{
  "permissions": [
    "https://第三方域名/*"
  ]
}

注意：加了权限后，Service Worker请求的Origin还是chrome-extension://extensionID，但要么服务器允许这个Origin的CORS规则，要么浏览器因为扩展权限直接跳过检查，就能正常请求。

• 修改服务器端CORS配置
  如果你能改第三方服务器的配置，直接把chrome-extension://你的扩展ID加入合法Origin列表就行，测试环境也可以临时允许所有Origin。比如Nginx里这么配：

add_header Access-Control-Allow-Origin "chrome-extension://abcdefghijklmnopqrstuvwxyz";
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
add_header Access-Control-Allow-Headers "Content-Type";

这方法最直接，但前提是你能控制服务器。

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