从源“null”访问“http://github/..file.json”处的 XMLHttpRequest 已被 CORS 策略阻止：
Posted
技术标签:
【中文标题】从源“null”访问“http://github/..file.json”处的 XMLHttpRequest 已被 CORS 策略阻止：【英文标题】：Access to XMLHttpRequest at 'http://github/..file.json' from origin 'null' has been blocked by CORS policy: 【发布时间】：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 的概念（不知道）
【问题讨论】：
【参考方案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/…以上是关于从源“null”访问“http://github/..file.json”处的 XMLHttpRequest 已被 CORS 策略阻止：的主要内容，如果未能解决你的问题，请参考以下文章
CORS 策略已阻止从源“null”访问 XMLHttpRequest：对预检请求的响应未通过访问控制 [重复]
尝试使用导入的 js 函数启动 html 页面时出现“CORS 策略已阻止从源‘null’访问脚本”错误
从源“null”访问 Twitter_OAuth_Url（从“http://localhost:3000/api/twitter-login”重定向）的 XMLHttpRequest 已被阻止
从本地 html 文件到服务器的 JSON 请求引发 CORS 错误：CORS 策略已阻止从源“null”访问 <URL> 处的 XMLHttpRequest