javascript - chrome扩展中的CORS

Question

我正在制作 chrome 扩展，我需要向另一个域发出跨域 POST 请求。Content Script代码在有一些限制的 Chrome 环境中运行。

我将我的代码注入到特定站点中的域看起来像service.site.com，我必须向域发出请求api.site.com

来自的响应标头api.site.com看起来像

access-control-allow-credentials: true
access-control-allow-headers: Authorization, Content-Type, X-Requested-With, Accept
access-control-allow-methods: GET, POST, PUT, DELETE, OPTIONS
access-control-allow-origin: https://service.site.com

如您所见，另一个域允许来自service.site.com. 这意味着我的请求标头的Origin标头应包含该 Origin。

但是 chrome 扩展为我添加了一个 Origin 标头！

现在它发送一个api.site.com带有标头的请求

Origin: chrome-extension://oeminagccdkclchnelmkbkcpcfnjgofj

并api.site.com可能阻止它？我没有收到任何回复。请求崩溃，我看不到任何错误，也没有响应数据。

当然我在清单文件中添加了权限：

"permissions": [
  "*://service.site.com/*",
  "*://api.site.com/*"
],

它仍然不起作用。Chrome 扩展程序继续更改 Origin 标头并且服务器没有响应。或者它有响应但我的浏览器阻止了它？我查不出来。如果我在 WEB 脚本环境中运行该请求，它运行良好，我会看到来自服务器的响应。但我仍然必须在内容脚本环境中运行它。

我什至尝试在 web 脚本环境中注入带有 post 请求的函数并从内容脚本环境中调用它，但如果我这样做，它会添加 Origin 标头并且它不起作用。

我还尝试使用 Chrome 扩展功能更改响应标头，希望这会有所帮助

const responseListener = function(details){
  const out = [];
  details.responseHeaders.forEach(item => {
    if (item.name.toLowerCase() !== 'access-control-allow-origin') {
      out.push(item);
    }
  });
  out.push({name: 'access-control-allow-origin', value: '*'});
  return {responseHeaders: out};
};

chrome.webRequest.onHeadersReceived.addListener(responseListener, {urls: ["*://*/*"]},
  ["blocking", "responseHeaders"]);

现在它显示api.site.com返回我的标题，但它仍然没有帮助。

标签： javascriptgoogle-chromegoogle-chrome-extension