Chrome 开发者扩展中的 CORS 问题

Posted 2023-03-04

【中文标题】Chrome 开发者扩展中的 CORS 问题

【英文标题】：CORS Issue in Chrome Developer Extension

【发布时间】：2017-04-13 00:17:46

【问题描述】：

我是 Chrome 扩展开发的新手，我正在开发一个 Chrome Developer 扩展（作为开发工具的一部分出现）。 此要求是进行外部服务（某些 URL）调用，该调用可能在或不在同一服务器（来源）中。从文档中我看到扩展不受同源策略的限制。 https://developer.chrome.com/extensions/xhr

但是，当我尝试调用外部服务时遇到了 CORS 问题。

Manifest.json 如下所示，我有权访问所有网站。

"permissions": [
        "tabs",
        "clipboardWrite",
        "http://*/*",
        "https://*/*"
    ],

在我试图在某个 URL 上调用 HTTP POST 的代码中，代码看起来像

gwUrl = 'http://services.odata.org/V2/(S(lts2i32bwwy01zoq4cxyscwt))/OData/OData.svc/Products';
var xhr = new XMLHttpRequest();
xhr.open("POST", gwUrl , true);
xhr.setRequestHeader("Content-type", "application/json");
xhr.onreadystatechange = function() 
xhr.send( "ID":17, "Name": "Bread", "Description": "Whole grain bread");      

我收到以下错误。

选项 http//services.odata.org/V2/(S(lts2i32bwwy01zoq4cxyscwt))/OData/OData.svc/Products 501（未实施）

XMLHttpRequest 无法加载 http//services.odata.org/V2/(S(lts2i32bwwy01zoq4cxyscwt))/OData/OData.svc/Products。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问源“chrome-extension://cdcbiglainpfeapfejdjdkldcehjakfi”。响应的 HTTP 状态代码为 501。

Error Screenshot 谁能指导我解决这个问题。

【参考方案1】：

您可能想尝试添加 Access-Control-Allow-Origin 标头。响应头指示是否可以与具有给定来源的资源共享响应。

您可能还想查看Using CORS 教程以获得更好的理解。本教程提到需要在所有有效的 CORS 响应中包含 Access-Control-Allow-Origin 标头，省略标头将导致 CORS 请求失败。

以下 SO 帖子中给出的解决方案也可能有所帮助：

Error in Chrome only: XMLHttpRequest cannot load file URL No 'Access-Control-Allow-Origin' header is present on the requested resource XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin How does Access-Control-Allow-Origin header work?