Question

我拼命想要获得一个网站的本地版本来获取JSON文件（也是本地文件）而没有运气。确切的代码在我的服务器上完美运行，但一旦在本地，就会中断。

我使用jQuery获取JSON：

$.getJSON(
 "lib/js/app.json",
     function(data){
        $.each(data, function(i,user){
        +'<img src="'+user.thumbnail+'"/>
        });
      }
);

并收到此控制台错误：

XMLHttpRequest cannot load file://localhost/Users/blakestruhs/new/lib/js/app.json. Origin null is not allowed by Access-Control-Allow-Origin.

我在这里寻求答案。请帮帮我。

Answer 1

JSON必须加载HTTP协议而不是本地文件协议。

跨域投诉是它会将每个文件视为不同的域，因此您需要在Web服务器中运行它。

设置本地网络服务器或将JSON存储在变量中，并完全跳过getJSON。

Answer 2

Chrome不允许对本地文件进行ajax调用。请参阅This

Answer 3

跨域允许XmlHttpRequest。

如果您需要在本地PC上进行演示，请将您的Web应用程序设置为在本地Web服务器上运行，并将json源返回为同一Web应用程序。

这是我能想到的唯一方法。出于安全原因，您不能在文件系统上使用Ajax调用。

Answer 4

我认为你使用像chrome这样的Webkit浏览器，对吧？ Chome确实看到了两个本地文件之间的关系。使用Firefox或在网络服务器上运行;）

"Origin null is not allowed by Access-Control-Allow-Origin" in Chrome. Why?

Answer 5

我认为如果您访问使用IP地址调用getJSON的页面，则使用ip地址而不是localhost作为json文件，实际上它们属于同一个域并且应该可以正常工作

Answer 6

对于支持它的浏览器（包括Chrome），您可以使用FileReader API，而不是使用getJSON。

var r = new FileReader();
r.onload = function(e) {
        var obj = JSON.parse(e.target.result);
        // do what you will with the object
}
// Start the async read
r.readAsText(file);

请注意，文件变量必须是File或Blob对象。获得一个的最简单方法是让用户从文件输入元素中选择它。如果您需要在不询问用户的情况下阅读文件，可以查看：https://stackoverflow.com/a/30896068/2476389

Answer 7

尝试 https://jsonbin.io/ 将 bin 设为公开，并将 URL 提供给 getJSON cal

$.getJSON("https://api.jsonbin.io/b/58f9f835a3de5638", function(data) {}

Answer 8

您应该http://localhost使用file://localhost;

$.getJSON(
 "http://localhost/Users/blakestruhs/new/lib/js/app.json",
     function(data){
        $.each(data, function(i,user){
        +'<img src="'+user.thumbnail+'"/>
        });
      }
);

$ .getJSON无法使用本地JSON文件

8 个答案: