Question

我发现了许多与我的问题类似的问题。也许是我，但我很难找到一个真正明确的答案，为什么我不能做多个json请求或为什么这不起作用。

这是我的jQuery代码：

$.getJSON('http://api.espn.com/v1/sports/basketball/nba/teams/16/news?apikey=0001234', function(data) {
    console.log(data.headlines);              
});

$.getJSON('http://api.espn.com/v1/sports/football/nfl/teams/16/news?apikey=0001234', function(data) {
    console.log(data.headlines);
});

以下是我在控制台日志中收到的错误。

XMLHttpRequest cannot load http://api.espn.com/v1/sports/football/nfl/teams/16/news?apikey=62t2h4tsdmhr2q7aynvjuv2s. Origin null is not allowed by Access-Control-Allow-Origin.

当我自己运行一个$ .getJSON请求时，它工作正常。所以我假设这是因为我正在提出多个请求。我只是不确定如何以不相互冲突的方式编写它。感谢任何帮助。感谢

修改

所以我想那个问题..是否有可能以这种方式做多个请求。我的代码有问题吗？或者它很可能是ESPN API的问题。我可以尝试使用yahoo api，看看我是否得到了相同的结果。

Answer 1

你能一个接一个地发出两个json请求吗？

是。他们不会互相干涉。

ESPN会返回两个请求的数据吗？

目前否。您的第二个请求将返回403响应。他们可能会改变一下，谁知道......

为什么我收到错误Origin null is not allowed by Access-Control-Allow-Origin.？

正如您在评论中提到的，您的脚本是从以file://开头的网址执行的。正如本answer

中所述

CORS标头有两种方式来表示跨域XHR 没关系一种是发送Access-Control-Allow-Origin：*（如果你这样的话）通过$ .get到达Flickr，他们一定是这样做的另一个是回显Origin头的内容。然而， file：// URL生成一个无法通过授权的null 回声回。

将文件托管在某个服务器上，即使是localhost，您也会收到该错误。作为替代方案，如果ESPN支持请求，您可以尝试使用jsonp请求。

尝试此查询，

$.getJSON('http://api.espn.com/v1/sports/football/nfl/teams/16/news?apikey=0001234&callback=?',     
function(data) {
    console.log(data.headlines);
});

请注意网址末尾的&callback=? ...

Answer 2

发出多个$.getJSON来电没有概念上的错误。虽然正如Amith George在原始问题的评论中提到的那样，如果超过允许的速率限制，您可能会收到403条回复。（Twitter使用此响应代码;我不确定ESPN是否这样做。）

对我来说，当这些JSON调用是域中托管的HTML文件的一部分时，例如jsfiddle.net，我会将两个对象记录到控制台（参见http://jsfiddle.net/pGBmT/）。这使用jquery 1.7.2。

如果我在HTML文件中尝试使用旧版本的jquery（1.3），我会收到您注意到的错误。

然而，当我使用jquery 1.7.2时，它在本地也可以正常工作（尽管其他人偶尔会报告问题）。这是我在本地尝试的文件：

<!doctype html>
<html>
  <head><meta charset="utf-8"><title>Test</title></head>
  <body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
      $.getJSON('http://api.espn.com/v1/sports/basketball/nba/teams/16/news?apikey=62t2h4tsdmhr2q7aynvjuv2s', function(data) {
        console.log(data.headlines);              
      });
      $.getJSON('http://api.espn.com/v1/sports/football/nfl/teams/16/news?apikey=62t2h4tsdmhr2q7aynvjuv2s', function(data) {
        console.log(data.headlines);
      });
    </script>
  </body>
</html>

您可以尝试连续多次重新加载。大多数时候我没有看到任何问题，但偶尔我会得到403s。通常我会在第二个原点错误中得到一个成功的响应。

我最好的猜测是速率限制问题。尝试将其中一个呼叫置于setTimeout，延迟时间为3或4秒。当我尝试这个时：

<!doctype html>
<html>
  <head><meta charset="utf-8"><title>Test</title></head>
  <body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
      $.getJSON('http://api.espn.com/v1/sports/basketball/nba/teams/16/news?apikey=62t2h4tsdmhr2q7aynvjuv2s', function(data) {
        console.log(data.headlines);              
      });
      setTimeout(function () {$.getJSON('http://api.espn.com/v1/sports/football/nfl/teams/16/news?apikey=62t2h4tsdmhr2q7aynvjuv2s', function(data) {
        console.log(data.headlines);
      })}, 4000);
    </script>

它连续工作了5次没有问题！

Answer 3

我很难看到一个getJSON()请求是如何工作的。默认情况下，您不允许执行跨域浏览器请求 - 这是您的错误消息所声明的内容。

要进行跨域请求，您必须使用JSON-P，如果API支持它，或者在您自己的域中设置服务器端代理，您可以使用Ajax请求调用它 - 从而避免跨域请求。

如何在没有冲突的情况下执行多个json请求

3 个答案: