Json文件读取失败答案

【问题标题】：Json file read failureJson文件读取失败
【发布时间】：2014-05-20 17:12:34
【问题描述】：

如果我浏览到http://wwwendt.de/tech/fancytree/demo/ajax-tree-plain.json

我的浏览器中显示以下内容：

[
{"title": "simple node (no explicit id, so a default key is generated)" },
{"key": "2", "title": "item1 with key and tooltip", "tooltip": "Look, a tool tip!" },
{"key": "3", "title": "<span>item2 with <b>html</b> inside a span tag</span>" },
{"key": "4", "title": "node 4" },
{"key": "5", "title": "using href", "href": "http://www.wwWendt.de/" },
{"key": "6", "title": "node with some extra classes (will be added to the generated markup)", "extraClasses": "my-extra-class" },
{"key": "10", "title": "Folder 1", "folder": true, "children": [
    {"key": "10_1", "title": "Sub-item 1.1", "children": [
        {"key": "10_1_1", "title": "Sub-item 1.1.1"},
        {"key": "10_1_2", "title": "Sub-item 1.1.2"}
    ]},
    {"key": "10_2", "title": "Sub-item 1.2", "children": [
        {"key": "10_2_1", "title": "Sub-item 1.2.1"},
        {"key": "10_2_2", "title": "Sub-item 1.2.2"}
    ]}
]},
{"key": "20", "title": "Simple node with active children (expand)", "expanded": true, "children": [
    {"key": "20_1", "title": "Sub-item 2.1", "children": [
        {"key": "20_1_1", "title": "Sub-item 2.1.1"},
        {"key": "20_1_2", "title": "Sub-item 2.1.2"}
    ]},
    {"key": "20_2", "title": "Sub-item 2.2", "children": [
        {"key": "20_2_1", "title": "Sub-item 2.2.1"},
        {"key": "20_2_2", "title": "Sub-item 2.2.2"}
    ]}
]},
{"key": "30", "title": "Lazy folder", "folder": true, "lazy": true },
{"key": "31", "title": "Lazy folder 2", "folder": true, "lazy": true },
{"key": "32", "title": "Lazy folder 3", "folder": true, "lazy": true }
]

根据 jsonlint.com，这是有效的 json 数据。

但如果我运行这个 jsfiddle：http://jsfiddle.net/5a6e3/

其中包含此代码：

$.getJSON( "http://wwwendt.de/tech/fancytree/demo/ajax-tree-plain.json", function() {
alert( "success" );
}).fail(function() {
alert( "error" );
})

它返回一个错误。我在这里错过了什么？

【问题讨论】：

查看en.wikipedia.org/wiki/Same-origin_policy：http://jsfiddle.net（或http://fiddle.jshell.net）上的代码不允许访问来自http://wwwendt.de 的资源——除非 JSON 文件带有适当的 CORS 标头允许访问。
查看 chrome 调试器时，我看到错误：请求的资源上不存在“Access-Control-Allow-Origin”标头。
投反对票表示“这个问题没有显示任何研究工作；不清楚或没有用”。我承认没有使用调试器，我在这方面没有丰富的经验，应该尝试自学它的使用。但是，我确实验证了 json，创建了一个简单的 jsfiddle 来消除它，这对我来说没什么用，并且确实查看了 Stackoverflow 上之前的类似问题。在这个问题的 90 秒内，我也意外地使用了不正确的 C# 标签。我认为有些用户忘记了技术新手，它可能会给你一个简单的答案，但这不是反对的原因。
我认为你也很努力地解决了问题，所以这就是为什么我将你投票为零。

标签： javascript jquery json

【解决方案1】：

您的问题似乎是由于没有必需的标题：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

来自这个链接：

跨域资源共享标准通过添加新的 HTTP 来工作允许服务器描述源集的标头允许使用网络浏览器阅读该信息。

您需要让您的服务器将此标头发送到浏览器。如果没有标头，您将无法在页面来自的域之外发出请求。

【讨论】：