Question

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

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: *');，这会解决吗？

Answer 1

您正在尝试进行跨源资源共享（CORS）。坏消息是没有服务器作为中间人，就无法在普通网页上执行此操作。好消息是，在Chrome扩展程序中，您可以请求访问您想要的任何URL的权限。只需在manifest.json文件中输入这样的内容即可。

允许与您网站的连接：

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

允许连接到任何网站：

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

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

Answer 2

在制作跨域XHR请求时，Chrome扩展程序有两种“模式”：

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

2）如果域不在“权限”中 - 请求包含“Origin”标头，其值为“chrome-extension：// ...”这表示请求是CORS请求，并且响应必须有一个有效的Access-Control-Allow-Origin标头才能成功。

Answer 3

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

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

Answer 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作为原始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.
    }
  });

Answer 5

在谷歌上花了几天时间后，最终为我找到了解决方案。

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

就我而言，我有 CORSFilter java 类以及以下代码。 http.cors(withDefaults()) // 因为我已经注册了 CORS，所以删除了这个。

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

5 个答案: