主页 / 问题 / 1204742
Accepted
D .Stark
Asked:2021-11-15 04:53:57 +0800 CST2021-11-15 04:53:57 +0800 CST

脚本被 CORS 策略阻止

  • 772

在 Chrome 扩展程序中，我尝试使用 XMLHttpRequest 加载一些脚本，但出现以下错误：

从源“...”访问“...”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

如何绕过 CORS 策略并仍然加载所需的脚本？

javascript

1 个回答

  1. Best Answer

    解决方案是添加一个后台脚本，该脚本注册一个事件处理程序以接收服务器响应标头。在处理程序中，您需要向服务器响应添加一个access-control-allow-origin带有值的标头*- 这使浏览器认为服务器响应的内容可以被发送请求的任何“源”访问。

    背景.js：

    chrome.webRequest.onHeadersReceived.addListener(
    function (details) {
        var rule = {
            "name": "access-control-allow-origin",
            "value": "*"
        };
        details.responseHeaders.push(rule);
        return { responseHeaders: details.responseHeaders };
    },
    { urls: ["<all_urls>"] },
    ["blocking", "responseHeaders", "extraHeaders"]);

    我们还将以下行添加到manifest.json：

    "background": {
    "scripts": [ "background.js" ],
    "persistent": true
},
"permissions": [
    "webRequest",
    "webRequestBlocking",
    ...
]
    • 2

相关问题