CORS策略阻止了对来自'null'的'http：//github/..file.json'的XMLHttpRequest的访问：
[英]Access to XMLHttpRequest at 'http://github/..file.json' from origin 'null' has been blocked by CORS policy:
问题描述
I am trying requesting a json file guesting in github (eg : http://github/..file.json ), I have a javascript code (without jquery) unlike this question that use it to request that file with an ajax. 
我正在尝试在github中请求一个json文件（例如： http：//github/..file.json ），我有一个javascript代码（没有jquery），不像这个问题用它来请求带有ajax的文件。
index.js 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 的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>
I open the index.html in the browser without a local server (apache, etc...), next i clicked the button it returns the following warning 我在浏览器中打开index.html而没有本地服务器（apache等等），然后我点击按钮它会返回以下警告
Access to XMLHttpRequest at ' https://github.com/.../file.json ' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index.js:12 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://github.com/.../file.json with MIME type text/html.
Normally (in my work flow) I created ajax request to same local server and i confuse a few this concepts like CORS (No idea) 通常（在我的工作流程中）我向同一个本地服务器创建了ajax请求，我混淆了一些像CORS这样的概念（不知道）
1 个解决方案
解决方案1
2 已采纳 2019-02-15 13:25:56
EDIT: 编辑：
Seems the issue was in the fact that you were trying to request resource that wasn't raw json but instead a github page. 似乎问题在于您尝试请求的资源不是原始json而是github页面。 Changing url 改变网址
from https://github.com/.../heroes.json 来自https://github.com/.../heroes.json
to https://raw.githubusercontent.com/.../heroes.json 到https://raw.githubusercontent.com/.../heroes.json
is the solution. 是解决方案。
ORIGINAL ANSWER: There is nothing wrong with your code, when i try to request some json file using your function i receive the correct response as prsented here: 原始答案：您的代码没有任何问题，当我尝试使用您的函数请求一些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)
The issue seems to be with CORB 问题似乎与CORB有关
Cross-Origin Read Blocking (CORB) is an algorithm that can identify and block dubious cross-origin resource loads in web browsers before they reach the web page.
1) Cross-origin requests for images, media, and fonts will receive empty responses if the response from the network has an HTML, XML, or JSON content type and a nosniff response header. 1）如果来自网络的响应具有HTML，XML或JSON内容类型和nosniff响应头，则对图像，媒体和字体的跨源请求将收到空响应。 The responses' headers will be filtered to CORS safelisted response headers and CORS response headers. 响应的标头将被过滤为CORS安全列表响应头和CORS响应头。
Discussion: https://github.com/whatwg/fetch/pull/686 讨论： https ： //github.com/whatwg/fetch/pull/686
2) Cross-origin requests from media tags will receive empty responses if the response from the network has a 206 (range request) status and an HTML, XML, or JSON content type. 2）如果来自网络的响应具有206（范围请求）状态和HTML，XML或JSON内容类型，则来自媒体标签的跨源请求将接收空响应。 The responses' headers will be filtered to CORS safelisted response headers and CORS response headers. 响应的标头将被过滤为CORS安全列表响应头和CORS响应头。
3) Cross-origin requests from script tags will receive empty responses if the response from the network has an HTML, XML, or JSON content type and is confirmed to be HTML, XML, or JSON using confirmation sniffing logic. 3）如果来自网络的响应具有HTML，XML或JSON内容类型，并且使用确认嗅探逻辑确认为HTML，XML或JSON，则来自脚本标记的跨源请求将收到空响应。 The responses' headers will be filtered to CORS safelisted response headers and CORS response headers. 响应的标头将被过滤为CORS安全列表响应头和CORS响应头。 Such responses would not have run successfully anyway, but now they will not generate a syntax error. 无论如何，此类响应都不会成功运行，但现在它们不会生成语法错误。 (Note: responses with nosniff headers and the wrong content type are already blocked from script tags.) （注意：带有nosniff标头和错误内容类型的响应已从脚本标记中阻止。）
4) Cross-origin requests from script tags will receive empty responses if the response from the network starts with a JSON security prefix and is not otherwise permitted via CORS. 4）如果来自网络的响应以JSON安全性前缀开始并且通过CORS不允许，则来自脚本标记的跨源请求将接收空响应。 The responses' headers will be filtered to CORS safelisted response headers and CORS response headers. 响应的标头将被过滤为CORS安全列表响应头和CORS响应头。 Such responses would not have run successfully anyway, but now they will not trigger infinite loops (eg, when the for(;;); prefix is present). 这样的响应无论如何都不会成功运行，但现在它们不会触发无限循环（例如，当for（;;）;前缀存在时）。 (Note: these responses will be blocked in other cases as well, but the effect is not observable for other tag types, such as images.) （注意：这些响应在其他情况下也会被阻止，但其他标记类型（如图像）的效果无法观察到。）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.