“对 fetch 的访问已被 CORS 策略阻止”Chrome 扩展程序错误

Question

我正在尝试从 Chrome 扩展程序的后台脚本中的外部 API 获取数据，使用消息传递从内容脚本发起调用并获取结果。我无法控制外部 API。该 API 的文档说使用脚本标签来获取 jsonp 响应，但如果我理解正确，那么在实现以下项目时这应该不重要。难道我错了？

• fetch()

  在后台脚本中

• "\*://\*/"

  在清单中的我的权限中（如果我能让它工作，我会更改它，只是消除这种可能性）
• 扩展已“打包”

错误： 从源“chrome-extension://bunchofchars”获取“https://external-api.com”的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：无“访问控制” -Allow-Origin'标头存在于请求的资源上。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

关于我做错了什么有任何线索吗？

背景.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
      fetch('https://api.com/' + request.user + 'restofurl',
          {
            method: 'get',
            headers: {'Content-Type':'application/json'}
          })
//          .then(response => parseResults(response.results))
          .then(response => sendResponse({result: response.results}))
//          .catch(error => ...)
      return true;
  });

内容.js

(() => {
    function foo() {

        var parent = document.getElementById('someId');
        var username = parent.getElementsByTagName('a')[6].innerHTML;
        chrome.runtime.sendMessage({user: username}, function(response) {
            console.log(response.result);
        });
    window.addEventListener('load', foo);

})();

Answer 1

Manifest 版本 3 使用 host_permissions 字段

"host_permissions": ["https://api.com/*"],

Answer 2

也许您的扩展程序只允许在此特定站点上读取和修改。

让扩展程序读取和更改站点数据

• 当您单击扩展程序时：此设置仅允许扩展程序在您单击扩展程序时访问打开的选项卡或窗口中的当前站点。如果您关闭选项卡或窗口，则必须单击扩展程序才能再次将其打开。
• 在[当前站点]上：允许扩展程序自动读取和更改当前站点上的数据。
• 在所有站点上：允许扩展程序自动读取和更改所有站点上的数据。

尝试更改为最后一个选项。这应该会改变 CORS 政策。

Answer 3

我在为清单 v3 开发新扩展时遇到了同样的问题。 正如前面所说，cors 错误可能与缺失的

host_permissions

条目相关联。

但这也可能与您的扩展程序的全局站点设置有关。 如果扩展程序未配置为在所有站点上运行，则必须在

matches

 的 

content_scripts

条目中添加 api 的 url

这根本不合逻辑，因为它应该设置内容脚本的权限，但它也设置在其他站点上使用整个扩展的权限。

Answer 4

理想情况下，cors 问题必须通过添加特定源在服务器端解决。这是因为所有现代浏览器（例如 Chrome）都会阻止来自同一台计算机的请求。

但是，在这种情况下，请尝试使用其他获取参数，如下所示：

fetch(url, {
method: 'GET', // *GET, POST, PUT, DELETE, etc.
mode: 'no-cors', // no-cors, *cors, same-origin

headers: {
  //'Content-Type': 'application/json'
  // 'Content-Type': 'application/x-www-form-urlencoded',
},
body: JSON.stringify(data) // body data type must match "Content-Type" header
});