jQuery getJSON 在本地工作，但不能跨域

Question

我一直在寻找，但无法为我的问题找到明确的答案。所以就是这样。我有一个 JSON 文件（我去 jsonlint 进行验证，它说它很好），看起来像这样（修改了一些信息）：

[{
        "position":"1",
        "category":"A",
        "title":"Title to first story",
        "description":"The first story."
    },
    {
        "position":"2",
        "category":"B",
        "title":"Title to second story",
        "description":"The second story"
    },
    {
        "position":"3",
        "category":"B",
        "title":"Title to third story",
        "description":"The third story"
    }
]

我使用 jQuery 解析并使用此函数放置在 html 页面上：

$.getJSON('page.json', function(data) {
  var items = [];

  $.each(data.reponse, function(item, i) {
    items.push('<li id="' + i.position + '">' + i.title + ' - ' + i.description + '</li>');
  });

  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

它工作得很好！现在我的问题来了，JSON 文件不会托管在本地，实际上会托管在一个单独的域上。因此，我按如下方式修改了代码（经过一番阅读后），希望能够使其正常工作：

$.getJSON('http://www.otherdomain.com/page.json?format=json&callback=?', function(data) {
  var items = [];

  $.each(data.reponse, function(item, i) {
    items.push('<li id="' + i.position + '">' + i.title + ' - ' + i.description + '</li>');
  });

  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

通过添加“回调”行，我不再收到“无法加载资源”错误。然而，什么也没有发生。就好像我添加的功能根本不存在一样。我试图将其全部取出并添加一个简单的“警报（数据）”，但这甚至没有触发。我做错了什么？一个大问题是我 100% 只能使用 HTML 和 JavaScript 来工作（不是我的选择）。感谢您的帮助！

编辑 好的，我无法让其他服务器动态地将任何内容添加到 json 文件中。所以我通过硬编码围绕 json 的函数（较小的示例）进行修改：

storyData(
[{
        "position":"1",
        "category":"A",
        "title":"Title to first story",
        "description":"The first story."
    }
])

现在一切正常了！感谢您的帮助！

Answer 1

您需要查看 JSONP。

本质上，当您尝试从另一个域加载 JSON 时，它会失败，因为存在无法跨越的域边界。为了避免这种情况，您必须PAD它（JSONP 中的 P）。填充它本质上是将其包装在函数调用中（其中函数名称驻留在您的客户端上）。例如“正常”JSON 响应（例如 getjson.php）：

{foo:'bar'}

带有 parseJSON 变为（例如 getjson.php?callback=parseJSON）：

parseJSON({foo:'bar'})

请注意 callback 中提供的值如何成为您的 JSON 响应现在包装的函数的名称.

然后你的客户将希望将其传递给 parseJSON，这是您客户端上存在的一个函数（您已定义）。 jQuery（和其他库）尝试通过生成一些“随机”函数，然后通过原始回调发送回响应（所有这些都是在幕后完成的）来为您解决这个问题。

如果您可以控制生成 JSON 的服务器页面，请实现一个回调方法，以便您可以提供 JSON 的包装方式，以便您可以在您的终端上使用它。 （仅当您处理来自客户端当前所在页面以外的域的数据时，才需要这样做）。

---

更新

要从根本上解决您遇到的问题，您需要找到一种方法将 JSON 信息放入 JSONP 调用中。在不知道“page.json”使用哪种语言的情况下，它应该包含以下伪代码逻辑：

if GET_VARIABLE("callback") is supplied

  print GET_VARIABLE("callback") and an open parenthesis
  print normal JSON data
  print closing parenthesis

else

  print normal JSON data

end if

如果您决定硬编码函数名称而不是允许它在 url 中作为“callback”提供，那么你需要记住它。对于下一个示例，假设我们将其命名为 MyJSONPCallback

现在，在您的客户端代码中，您可以继续使用：

$.ajax({
  url: 'http://anotherdomain.com/page.json?format=json',
  dataType: 'json',
  jsonpCallback: 'MyJSONPCallback', // specify the callback name if you're hard-coding it
  success: function(data){
    // we make a successful JSONP call!
  }
});

Answer 2

对于那些使用 MVC ActionResult 生成 JSONP 的人来说，ASP.NET MVC 并未提供开箱即用的 JSONP 支持，但可以轻松添加：

http://nikcodes.com/2012/02/29/an-asp-net-mvc-jsonp-actionresult

Answer 3

浏览器不允许将此作为​​安全措施。您可以查看 JSONP 作为解决此问题的方法，尽管这是一个巨大的安全风险，因为它依赖于运行您从中获取 JSON 文本的域提供的 javascript。

Answer 4

我没有深入研究这个问题，但我相信您的问题与同域策略有关...您可能想研究一下：http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/

Answer 5

请参阅这篇文章——您必须提供一个封装在函数中的有效 javascript 对象。

http://en.wikipedia.org/wiki/JSONP

你想要返回类似的内容：

parseResponse({"Name": "Cheeso", "Id" : 1823, "Rank": 7})

但是你的服务器端方法需要知道返回它，而不仅仅是返回里面有 JSON。 jQuery 所做的只是自动生成一个函数名称（callback 参数中的 ?），然后评估从服务器返回的“函数”。服务器使用内部包含的 JSON 创建函数调用。

Answer 6

Brad Christie 的回答帮助我快速让我的代码运行起来。我在这里创建一个新条目，因为它比其他解决方案简单一点。

以下是我从 http://localhost:5000 运行的代码 -

(function() {
        var api = "http://www.localhost:3000/auget_from_server?format=json";
        var request = $.getJSON( api, {
            secret : 'secret', 
            appId : 'app', 
            emailId : '[email protected]',
            async: false,
            dataType : 'json',
          },
          function(data, result){
            $("div.some_div").append(JSON.stringify(data));
          });

        request.complete(function(d, status){
            console.log('Complete the request and got the data - ' + JSON.stringify(d) + '/' + status, filename);
        });

        request.error(function(err){
            console.log('Error happened - ', filename);
            console.log(err);
        });

        request.success(function( data, status, jqXHR ) {
            $("div.some_div").append(data);
        });


        })();

从 http://localhost:3000/auget_from_server，我返回以下 JSON 作为响应（这部分特定于流星，但它适用于非流星服务器也） -

this.response.writeHead('200', {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'});
this.response.end(JSON.stringify([{'works_or_not' : 'works', 'name' : 'akaushik', 'application' : 'Qoll', 'message' : 'hello from server', 'currentTime' : dt+''}]));

这会在日志中打印以下内容 -

Complete the request and got the data - {"readyState":4,"responseText":"[{\"works_or_not\":\"works\",\"name\":\"akaushik\",\"application\":\"Qoll\",\"message\":\"hello from server\",\"currentTime\":\"Tue Dec 15 2015 23:59:14 GMT-0500 (EST)\"}]","responseJSON":[{"works_or_not":"works","name":"akaushik","application":"Qoll","message":"hello from server","currentTime":"Tue Dec 15 2015 23:59:14 GMT-0500 (EST)"}],"status":200,"statusText":"OK"}/success