美元.getJSON不能与本地JSON文件一起工作

$.getJSON not working with local JSON file

本文关键字：JSON 文件 一起 工作 getJSON 不能 美元      更新时间：2023-09-26

我拼命试图获得一个网站的本地构建，以获得JSON文件(也是本地)没有运气。确切的代码在我的服务器上工作得很好，但是一旦本地，就坏了。

我得到JSON jQuery像这样:

$.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.

我很想知道答案。

我想你使用像chrome这样的Webkit浏览器，对吗?chrome看不到两个本地文件之间的关系。使用Firefox或在web服务器上运行;)

Access-Control-Allow-Origin"在Chrome。为什么?

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

跨域的抱怨是，它会把每个文件作为一个不同的域，所以你需要在web服务器上运行它。

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

Chrome不允许对本地文件进行ajax调用。参考这个

XmlHttpRequest不允许跨域。

如果你需要在本地pc上做演示，将你的web应用程序设置为在本地web服务器上运行，并将json源返回为相同的web应用程序。

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

如果你用IP地址访问调用getJSON的页面那么使用IP地址而不是localhost作为json文件，它们实际上属于同一个域它应该能工作

不使用getJSON，对于支持它的浏览器(包括Chrome)，您可以使用FileReader API。

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变量需要是file或Blob对象。最简单的方法是让用户从文件输入元素中选择它。如果您需要在不询问用户的情况下读取文件，您可以检查:https://stackoverflow.com/a/30896068/2476389

尝试将bin设置为公共，并将url提供给getJSON调用

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

您应该使用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+'"/>
        });
      }
);
相关文章：