在chrome扩展上的访问控制-允许-起源。

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

https:/developer.chrome.comextensionsxhr。

仔细阅读该文档，检查你的权限设置是否正确。

Answer 2

你正在尝试进行跨源资源共享（CORS）。坏消息是，如果没有服务器作为中间人，就无法在普通的网页上实现这个功能。好消息是，在chrome扩展中，你可以请求访问任何你想要的URL的权限。只要在你的manifest.json文件中加入这样的内容就可以了。

允许连接到你的网站。

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

允许连接到任何网站。

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

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

Answer 3

Chrome 扩展程序在进行跨域 XHR 请求时有两种 "模式"。

1）如果域在manifest.json文件的 "permissions "部分--请求没有 "Origin "头，总是成功的。

2）如果域名不在 "permissions "中--请求中包含一个 "Origin "头，其值为 "chrome-extension:/..." 这表明该请求是一个CORS请求，响应必须有一个有效的Access-Control-Allow-Origin头才能成功。

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内容脚本都是 受相同的CORS政策约束 作为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.
    }
  });