在谷歌浏览器中使用 jQuery 读取 JSON 文件错误答案

【问题标题】：Using jQuery to read a JSON file errors in Google Chrome在谷歌浏览器中使用 jQuery 读取 JSON 文件错误
【发布时间】：2011-09-30 12:02:14
【问题描述】：

我这里有一个 JSON 文件：

我正在尝试使用 Javascript/jQuery 在我的网站上阅读它：

$.getJSON("http://dalexl.webs.com/products.json")

（是的，我知道它不完整，我目前只是想加载它，我还没有努力阅读它）

我尝试在自己的站点目录中添加（我在我的 HD 上本地使用 Dreamweaver）。

$.getJSON("json/products.json")

问题是，在 Chrome 中（我不确定其他浏览器），控制台给我这个错误：

XMLHttpRequest cannot load @987654322@. Origin null is not allowed by Access-Control-Allow-Origin.

或：

XMLHttpRequest cannot load json/products.json. Origin null is not allowed by Access-Control-Allow-Origin.

起初，在线阅读该问题表明 Chrome 认为某个网站试图读取我计算机上的文件。但是，在线移动文件后，问题仍然存在。

有没有人可以解决这个问题？如果不应该支持，为什么 jQuery 有一个本地方法来做呢？

谢谢！

【问题讨论】：

【解决方案1】：

您正在尝试打开跨域？见：

【讨论】：

从我自己的文件系统加载时它也不起作用。
@DadeLamkins：那是因为本地文件系统是一个来源（来源“null”）。一些浏览器允许 origin null 从任何来源检索任何内容，而其他浏览器则不允许。许多人根本不允许在 ajax 调用中使用 file:/// 协议。

【解决方案2】：

除非脚本执行该行所在的页面

$.getJSON("http://dalexl.webs.com/products.json")

也在http://dalex1.webs.com 上，您正在与Same Origin Policy 发生冲突，这是对您可以通过XMLHttpRequest 加载的资源的限制（例如，“ajax”）。详情见链接。

您绕过 SOP 的选择是：

JSON-P，这需要修改您返回的数据，但方式很简单。
Cross-Origin Resource Sharing，一个相对较新的标准，服务器和浏览器都需要支持。（最新版本的 Firefox、Opera 和 Chrome 都通过XMLHttpRequest 支持它；IE8 及更高版本支持它，但只能通过XDomainRequest 对象而不是标准的XMLHttpRequest。Details here。）
在非常棘手的情况下，您可能会考虑使用YQL as a cross-domain proxy。

~~另外，请注意您返回的 JSON 无效（属性之间缺少逗号），请参阅 jsonlint.com 和其他验证工具。~~现在您已修复它。 p>

【讨论】：

那么，如果我将整个网站托管在网络帐户上，它会起作用吗？ -EDIT- 如果我在我的计算机上托管自己的小型 http 服务器会怎么样？
@DadeLamkins：只要请求不跨越来源，是的，这将起作用。因此，如果发出调用的页面在http://dalex1.webs.com 上，并且请求的数据也在http://dalex1.webs.com 上，那将起作用。如果您运行本地 Web 服务器，并且执行请求的页面位于 http://localhost 上，并且正在请求的数据位于 http://localhost 上，那将起作用。 http://localhost 上的页面无法从 http://dalex1.webs.com 请求数据，反之亦然。阅读 SOP 链接了解详情。
非常感谢！我决定运行一个本地服务器，这样我就不必每 2 秒重新上传一次 :)
@DadeLamkins：很高兴有帮助！ :-)

【解决方案3】：

http://dalexl.webs.com/products.json 不返回有效的 json。我喜欢使用http://jsonviewer.stack.hu/ 进行测试（当您按下“查看器”按钮时会出现错误）。

您缺少三个逗号：

之后：“url”：“#1”

之后：“url”：“#2”

之前：“蛋糕”：{

【讨论】：