chrome 扩展上的 Access-Control-Allow-Origin

Posted 2023-02-27

【中文标题】chrome 扩展上的 Access-Control-Allow-Origin

【英文标题】：Access-Control-Allow-Origin on chrome extension

【发布时间】：2011-10-26 17:40:03

【问题描述】：

我正在制作一个从我自己的服务器中提取数据的 Chrome 扩展程序。它一次使用大约 4 个 httpRequest，但有时我会收到如下控制台错误：

XMLHttpRequest cannot load http://apps.radionsm.lv/apps/system/index.php?request=now. Origin chrome-extension://egkddfmbidfobhchndockbhjancbpfkd is not allowed by Access-Control-Allow-Origin. 对每个人来说有时都不是。

如果我发送header('Access-Control-Allow-Origin: *'); 会解决问题吗？

【参考方案1】：

https://developer.chrome.com/extensions/xhr

通读该文档并检查您的权限是否已正确设置。

【参考方案2】：

Chrome 扩展在发出跨域 XHR 请求时有两种“模式”：

1) 如果域在 manifest.json 文件的“permissions”部分 - 请求没有“Origin”标头，并且总是成功。

2) 如果域不在“permissions”中 - 请求包含值为“chrome-extension://...”的“Origin”标头，这表明该请求是 CORS 请求，并且响应必须具有有效的 Access-Control-Allow-Origin 标头才能成功。

【参考方案3】：

您正在尝试进行跨源资源共享 (CORS)。坏消息是，如果没有服务器作为中间人，就无法在普通网页上执行此操作。好消息是，在 chrome 扩展程序中，您可以请求访问任何您想要的 url 的权限。只需在 manifest.json 文件中添加类似内容即可。

允许连接到您的网站：

 "permissions": [
    "http://*.radionsm.lv/"
  ],

允许连接到任何站点：

 "permissions": [
    "http://*/"
  ],

当用户安装您的扩展程序时，chrome 会在安装完成之前在对话框中通知他们所需的权限。

【讨论】：

值得一提 - 我必须删除并重新安装扩展程序才能从清单文件中更新权限。

我在这里支持 Geva Tal 的评论，并想进一步强调您确实必须卸载扩展程序然后重新安装它。仅仅从 Chrome 中重新加载扩展是不够的。

【参考方案4】：

您需要在 manifest.json 中设置权限：

  "permissions": [
    "https://example.com/" // if you need a particular site
    "<all_urls>"           // if you need any site (this will incur 
                           // manual review process in Chrome web store, mind you)
  ],

请注意，由于 Chrome 85 extn 内容脚本是 subject to the same CORS policy 作为 vanilla web 请求。这意味着现在在 extn 中进行跨站请求的唯一方法是在后台脚本中获取并将结果传递给内容脚本：

// Old content script, making a cross-origin fetch:
var itemId = 12345;
var url = "https://another-site.com/price-query?itemId=" +
         encodeURIComponent(request.itemId);
fetch(url)
  .then(response => response.text())
  .then(text => parsePrice(text))
  .then(price => ...)
  .catch(error => ...)

// New content script, asking its background page to fetch the data instead:
chrome.runtime.sendMessage(
    contentScriptQuery: "queryPrice", itemId: 12345,
    price => ...);

// New extension background page, fetching from a known URL and relaying data:
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) 
    if (request.contentScriptQuery === "queryPrice") 
      var url = "https://another-site.com/price-query?itemId=" +
              encodeURIComponent(request.itemId);
      fetch(url)
          .then(response => response.text())
          .then(text => parsePrice(text))
          .then(price => sendResponse(price))
          .catch(error => ...)
      return true;  // Will respond asynchronously.
    
  );

【参考方案5】：

在谷歌上花了几天时间，终于找到了适合我的解决方案。

如果您使用 Spring boot 并且正在编写自己的 CORSFilter 类，那么您也在维护安全性 java 配置文件，不要编写多个 CORS 来在 spring 中注册。

在我的例子中，我有 CORSFilter java 类以及下面的代码。 http.cors(withDefaults()) // 因为我已经注册了 CORS，所以删除了它。

【讨论】：

好的，我去看看。