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

我已经找了很久了，找不出一个确切的答案来回答我的问题。就是这样。我有一个JSON文件（我去jsonlint验证，它说它很好），看起来像这样（修改了一些信息）：

我使用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');
});

---

现在一切都好了！谢谢你的帮助

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

我没有深入研究这个问题，但我相信您的问题与相同的域策略有关。。。不过，您可能希望了解这一点：

您需要了解

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

回调为

parseJSON

的JSON变为（例如，getjson.php？callback=parseJSON）：

请注意，回调中提供的值如何成为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中提供，那么您需要记住它。对于下一个示例，让我们假设我们将其命名为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!
  }
});

请参阅本文——您必须提供封装在函数中的有效javascript对象

您可能希望返回如下内容：

parseResponse（{“Name”：“Cheeso”，“Id”：1823，“Rank”：7}）

---

但是您的服务器端方法需要知道如何返回它，而不仅仅是其中的JSON。jQuery所做的只是自动生成一个函数名（

回调

参数中的

？

），然后计算从服务器返回的“函数”。服务器使用内部包含的JSON创建函数调用。

对于那些使用MVC ActionResult生成JSONP的用户，ASP.NET MVC不附带现成的JSONP支持，但很容易添加：

---

布拉德·克里斯蒂的回答帮助我快速地让代码正常工作。我在这里创建一个新条目，因为它比其他解决方案简单一点

以下是我运行的代码-

从位于的位置，我返回以下JSON作为响应（这部分特定于meteor，但也适用于非meteor服务器）——

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

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

---

问题是使用JSONP-这就是为什么URL在查询字符串的末尾有一个

回调=？

？制作JSONP？@David：我的印象（似乎还有其他人）是，他/她正在提供回调，而不知道这样做的效果（或者他们为什么需要这样做）。然而，也许我错了。@Brad-我认为你是对的。我们假设JSONP“正常工作”，但事实并非如此。您必须在服务器端启用它。您需要服务器通过在函数中填充JSON响应（因此是P）来格式化JSON响应。您调用的服务器是否支持JSONP回调？听起来好像没有。仅仅在查询字符串中添加

callback=？

并不能使其正常工作。您的服务器必须以可回调的格式返回数据（如果这是一个单词的话）。请参阅下面的答案。您将需要访问要调用以使JSONP工作的服务调用。它不是自动的——尽管我承认，从大量的文档中可以看出，它的声音是这样的所以我添加了回调=？到HTML页面上的函数。你能更详细地说明需要对JSON文件做些什么吗？@Dusty:你的文件需要（当提供了

回调

参数[或你想命名的任何参数]时）获取该参数的值，并将其添加到JSON的开头，以及括号中。然后，在末尾添加一个右括号。实际上，您将JSON内容转换为一个复杂的函数调用，JSON数据作为参数传递。（只有当域“xyz.com”从“abc.com”（或类似）获取JSON数据时才需要这样做。）因此我需要修改JSON文件并在其周围添加类似于jsonFunction（）的内容，然后在getJSON函数中修改回调以回调=jsonFunction？@Dusty:最好的方法是实现一种将回调参数传递给文件的方法。当它存在时，将JSON数据包装到具有该名称的函数中。下一个最好的方法是在您的文件中硬编码回调，并记住它以便在javascript代码中使用。例如，如果您将其命名为“foo”，那么您的网站现在必须在其某处具有

函数foo（data）{}

，准备好并等待JSONP响应返回

{foo:'bar'}

parseJSON({foo:'bar'})

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

$.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!
  }
});

(function() {
        var api = "http://www.localhost:3000/auget_from_server?format=json";
        var request = $.getJSON( api, {
            secret : 'secret', 
            appId : 'app', 
            emailId : 'abc@gmail.com',
            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);
        });


        })();

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