Chrome扩展Manifest V3跨域调用后端API的CORS问题咨询

为什么你的配置会失败？ #

你踩了CORS的核心规则坑：当请求设置credentials: "include"时，后端的Access-Control-Allow-Origin绝对不能用*，必须指定具体的请求源。但你的内容脚本跑在任意网页上，请求源是当前网页的域名（比如google.com），总不可能给所有网站都配置一遍允许源吧？这就是报错的根本原因。

能不能直接在内容脚本里完成请求？ #

有两种方式，但推荐安全合规的那种：

方式1：后端动态返回请求源（仅本地测试用，不安全）

修改后端逻辑，读取请求头里的Origin值，把Access-Control-Allow-Origin设为这个值，同时加上Access-Control-Allow-Credentials: true。这样内容脚本就能直接发请求，但风险极大——随便哪个网站都能调用你的本地后端，很容易遭CSRF攻击，只适合本地调试玩玩。

方式2：用后台Service Worker代理请求（推荐）

这是Chrome扩展跨域的标准玩法，虽然你知道这个方法，但可以封装一下，让调用体验和直接fetch差不多：

• 在内容脚本里写个封装函数，把请求参数通过chrome.runtime.sendMessage发给后台；
• 后台利用扩展的权限（不受网页CORS限制）发起请求，再把结果回传给内容脚本。

代码示例：

1. 内容脚本（content.js）：

// 封装请求函数
async function callLocalBackend(url, options = {}) {
  return new Promise((resolve, reject) => {
    chrome.runtime.sendMessage(
      { action: 'proxyFetch', url, options },
      (resp) => resp.error ? reject(resp.error) : resolve(resp.data)
    );
  });
}

// 调用示例
callLocalBackend('http://localhost:8000/api/get-data', {
  method: 'POST',
  body: JSON.stringify({ foo: 'bar' }),
  headers: { 'Content-Type': 'application/json' }
})
.then(res => console.log('后端返回:', res))
.catch(err => console.error('请求失败:', err));

2. 后台Service Worker（background.js）：

chrome.runtime.onMessage.addListener((req, sender, sendResp) => {
  if (req.action === 'proxyFetch') {
    fetch(req.url, req.options)
      .then(res => res.json())
      .then(data => sendResp({ data }))
      .catch(err => sendResp({ error: err.message }));
    return true; // 标记为异步响应，避免Chrome提前关闭通道
  }
});

重要提醒 #

内容脚本是跑在网页的上下文里的，浏览器为了安全，必然会让它遵守当前网页的CORS规则——哪怕你给扩展加了host_permissions也没用，这是浏览器的安全边界。而后台Service Worker属于扩展自己的环境，不受网页CORS限制，这才是合规的跨域姿势。

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