Question

我正在学习JSON和AJAX，并且在GitHub上从repo加载简单的JSON文件时偶然发现了一个问题。

我使用浏览器同步来设置本地服务器，这里是代码：

var request = new XMLHttpRequest();
request.open(
    "GET",
    "https://github.com/d-ivashchuk/misc/blob/master/ancestry.json",
    false
);
request.onload = function() {
    var data = JSON.parse(request.responseText);
    console.log(data[3]);
};
request.send();

错误是：

无法加载。 No＆＃39; Access-Control-Allow-Origin＆＃39;标题出现在资源上。

由于我能够从GitHub下载一些JSON文件，我知道这是可能的，但仍然想知道如何解决这个问题。

Answer 1

您只需要使用文件的raw版本;有了它你只需要一个小修复，以使其工作：

  var request = new XMLHttpRequest();
  request.open(
  "GET",
  //The right url
  "https://raw.githubusercontent.com/d-ivashchuk/misc/master/ancestry.json",
  false
  );
  request.onload = function() {
  var data = JSON.parse(request.responseText);
  console.log(data[3]);
  };
  request.send();

你可以在这里看到它： JSFiddle demo

关于您的另一个问题：Is this solution also suitable for getting data from other sources apart from git?，简短的回答是否 ...但是，您可以将此解决方案与任何允许CORS的来源一起使用，例如例如，如果您检查https://raw.githubusercontent.com/d-ivashchuk/misc/master/ancestry.json中的标题，则可以看到以下标题存在Access-Control-Allow-Origin:*

尝试从GitHub存储库获取某些JSON文件时无法加载错误

1 个答案: