Javascript $.getJSON 不适用于本地 JSON 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8533078/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
$.getJSON not working with local JSON file
提问by Alexander
I am desperately trying to get a local build of a site to get a JSON file (also local) with no luck. The exact code worked perfect on my server, but once local, breaks.
我拼命地试图获得一个站点的本地构建，以获取一个 JSON 文件（也是本地的），但没有运气。确切的代码在我的服务器上运行得很好，但是一旦在本地，就会中断。
I get the JSON with jQuery like so:
我使用 jQuery 获取 JSON，如下所示：
$.getJSON(
"lib/js/app.json",
function(data){
$.each(data, function(i,user){
+'<img src="'+user.thumbnail+'"/>
});
}
);
And receive this console error:
并收到此控制台错误：
XMLHttpRequest cannot load file://localhost/Users/blakestruhs/new/lib/js/app.json. Origin null is not allowed by Access-Control-Allow-Origin.
I'm dying for an answer here. Please help me.
我很想在这里得到答案。请帮我。
采纳答案by frank_neff
I think you use a Webkit browser like chrome, right? Chome does'n see a relation between two local files. Use Firefox or run it on a webserver ;)
我想你使用像 chrome 这样的 Webkit 浏览器，对吧？Chome 没有看到两个本地文件之间的关系。使用 Firefox 或在网络服务器上运行它；)
"Origin null is not allowed by Access-Control-Allow-Origin" in Chrome. Why?
Chrome 中的“Access-Control-Allow-Origin 不允许使用 Origin null”。为什么？
回答by Joseph Le Brech
JSON has to load over the HTTP protocol rather than the local file protocol.
JSON 必须通过 HTTP 协议而不是本地文件协议加载。
The cross domain complaint is that it'll treat each file as a different domain so you need to run it in a web server.
跨域抱怨是它将每个文件视为不同的域，因此您需要在 Web 服务器中运行它。
either set up a local webserver or store your JSON in a variable instead and skip getJSON altogether.
要么设置本地网络服务器，要么将您的 JSON 存储在变量中，然后完全跳过 getJSON。
回答by Okky
回答by biomiker
Instead of using getJSON, for browsers which support it (including Chrome) you can use the FileReader API.
对于支持它的浏览器（包括 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);
Note that the file variable needs to be a File or Blob object. The easiest way to get one is to let the user choose it from a file input element. If you need to read a file without asking the user, you might check out: https://stackoverflow.com/a/30896068/2476389
请注意，文件变量必须是 File 或 Blob 对象。获得一个的最简单方法是让用户从文件输入元素中选择它。如果您需要在不询问用户的情况下读取文件，您可以查看：https: //stackoverflow.com/a/30896068/2476389
回答by John Ennis
I think if you access the page that calls the getJSON with the IP address then use the ip address instead of localhost for the json file, effectively they belong to the same domain and it should work
我认为，如果您访问使用 IP 地址调用 getJSON 的页面，则对 json 文件使用 ip 地址而不是 localhost，实际上它们属于同一个域，它应该可以工作
回答by Matteo Mosca
XmlHttpRequest isn't allowed cross-domain.
XmlHttpRequest 不允许跨域。
If you need to do a demonstration on a local pc, setup your web app to run on local webserver, and have the json source be returned be the same web application.
如果您需要在本地 PC 上进行演示，请将您的 Web 应用程序设置为在本地 Web 服务器上运行，并将 json 源返回为同一个 Web 应用程序。
That's the only way I can think to make it work. You can't use Ajax calls on filesystem for security reasons.
这是我能想到的让它发挥作用的唯一方法。出于安全原因，您不能在文件系统上使用 Ajax 调用。
回答by Sudhir Bastakoti
You should use http://localhostover file://localhost;
你应该使用http://localhostover file://localhost;
$.getJSON(
"http://localhost/Users/blakestruhs/new/lib/js/app.json",
function(data){
$.each(data, function(i,user){
+'<img src="'+user.thumbnail+'"/>
});
}
);
