CORS策略阻止了对来自'null'的'http：//github/..file.json'的XMLHttpRequest的访问：

Question

我正在尝试在github中请求一个json文件（例如： http：//github/..file.json ），我有一个javascript代码（没有jquery），不像这个问题用它来请求带有ajax的文件。

index.js

function fetchJSONFile(path, callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                var data = JSON.parse(httpRequest.responseText);
                if (callback) callback(data);
            }
        }
    };
    httpRequest.open('GET', path);
    httpRequest.send();
}

let button = document.createElement('button');
button.addEventListener("click", function () {
  // this requests the file and executes a callback with the parsed result once it is available
  fetchJSONFile('https://github.com/.../file.json', function(data){
      // do something with your data
      console.log(data);
  });
});
button.appendChild(document.createTextNode('JSON parse'));
document.body.appendChild(button); // append in body html

的index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script src="index.js" charset="utf-8"></script>
  </body>
</html>

我在浏览器中打开index.html而没有本地服务器（apache等等），然后我点击按钮它会返回以下警告

从'null'访问来自' https://github.com/.../file.json '的XMLHttpRequest已被CORS策略阻止：请求的资源上没有'Access-Control-Allow-Origin'标头。

index.js：12跨源读取阻塞（CORB）阻止跨源响应https://github.com/.../file.json，MIME类型为text / html。 有关详细信息，请参阅https://www.chromestatus.com/feature/5629709824032768 。

通常（在我的工作流程中）我向同一个本地服务器创建了ajax请求，我混淆了一些像CORS这样的概念（不知道）

Answer 1

编辑：

似乎问题在于您尝试请求的资源不是原始json而是github页面。 改变网址

来自https://github.com/.../heroes.json

到https://raw.githubusercontent.com/.../heroes.json

是解决方案。

原始答案：您的代码没有任何问题，当我尝试使用您的函数请求一些json文件时，我收到正确的响应，如下所示：

 function fetchJSONFile(path, callback) { var httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = function() { if (httpRequest.readyState === 4) { if (httpRequest.status === 200) { var data = JSON.parse(httpRequest.responseText); if (callback) callback(data); } } }; httpRequest.open('GET', path); httpRequest.send(); } fetchJSONFile("https://api.github.com/users/github",console.log)

问题似乎与CORB有关

跨源读取阻塞（CORB）是一种算法，可以在Web浏览器到达Web页面之前识别和阻止可疑的跨源资源负载。 CORB通过使敏感数据远离跨源网页，降低了泄漏敏感数据的风险。 在大多数浏览器中，它将这些数据保存在不受信任的脚本执行上下文之外。 在具有站点隔离的浏览器中，它可以完全保留这些数据不受信任的渲染器进程，甚至可以帮助防止像Spectre这样的旁道攻击。

1）如果来自网络的响应具有HTML，XML或JSON内容类型和nosniff响应头，则对图像，媒体和字体的跨源请求将收到空响应。 响应的标头将被过滤为CORS安全列表响应头和CORS响应头。

讨论： https ： //github.com/whatwg/fetch/pull/686

2）如果来自网络的响应具有206（范围请求）状态和HTML，XML或JSON内容类型，则来自媒体标签的跨源请求将接收空响应。 响应的标头将被过滤为CORS安全列表响应头和CORS响应头。

3）如果来自网络的响应具有HTML，XML或JSON内容类型，并且使用确认嗅探逻辑确认为HTML，XML或JSON，则来自脚本标记的跨源请求将收到空响应。 响应的标头将被过滤为CORS安全列表响应头和CORS响应头。 无论如何，此类响应都不会成功运行，但现在它们不会生成语法错误。 （注意：带有nosniff标头和错误内容类型的响应已从脚本标记中阻止。）

4）如果来自网络的响应以JSON安全性前缀开始并且通过CORS不允许，则来自脚本标记的跨源请求将接收空响应。 响应的标头将被过滤为CORS安全列表响应头和CORS响应头。 这样的响应无论如何都不会成功运行，但现在它们不会触发无限循环（例如，当for（;;）;前缀存在时）。 （注意：这些响应在其他情况下也会被阻止，但其他标记类型（如图像）的效果无法观察到。）

CORS策略阻止了对来自'null'的'http：//github/..file.json'的XMLHttpRequest的访问：

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-02-15 13:25:56

CORS策略阻止了对来自&#39;null&#39;的&#39;http：//github/..file.json&#39;的XMLHttpRequest的访问：

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-02-15 13:25:56

CORS策略阻止了对来自'null'的'http：//github/..file.json'的XMLHttpRequest的访问：

解决方案1
2 已采纳 2019-02-15 13:25:56