从源“null”访问“http://github/..file.json”处的 XMLHttpRequest 已被 CORS 策略阻止：答案

【问题标题】：Access to XMLHttpRequest at 'http://github/..file.json' from origin 'null' has been blocked by CORS policy:从源“null”访问“http://github/..file.json”处的 XMLHttpRequest 已被 CORS 策略阻止：
【发布时间】：2019-07-09 15:32:16
【问题描述】：

我正在尝试在 github 中请求一个 json 文件（例如：http://github/..file.json），我有一个 javascript 代码（没有 jquery），这与 this question 不同，它使用它来请求带有 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>

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

访问 XMLHttpRequest 在 'https://github.com/.../file.json' 来自原点“null”已被 CORS 策略阻止：否请求中存在“Access-Control-Allow-Origin”标头资源。

index.js:12 Cross-Origin Read Blocking (CORB) 阻止了跨域回复 https://github.com/.../file.json MIME 类型为 text/html。看 https://www.chromestatus.com/feature/5629709824032768 了解更多详情。

通常（在我的工作流程中）我创建了对同一本地服务器的 ajax 请求，并且我混淆了一些类似 CORS 的概念（不知道）

【问题讨论】：

标签： javascript html json ajax

【解决方案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 浏览器中的可疑跨域资源加载到达网页之前对其进行识别和阻止。 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(;;); 前缀时）。（注意：这些响应在其他情况下也会被阻止，但是对于其他标签类型，例如图像，效果是无法观察到的。）

【讨论】：

是的，你请求的url和我不一样，看到你请求的标题，Content-Type: application/json; charset=utf-8不像我的url是text/html正是这个url
有没有办法改变这些标题？
您请求的不是原始 json 而是 github 页面，请将链接更改为 raw.githubusercontent.com/jjoselon/cURL/master/JavaScript/…