JSONP请求返回错误：“未捕获的SyntaxError：意外的标记：”

Question

JSONP请求返回错误：“未捕获的SyntaxError：意外的标记：”

25

我正在尝试使用以下jQuery代码向Stack Exchange API 发送请求：

$.ajax({                                                                                                                                                                                                        
    type: 'POST',                                                                                                                                                                                                 
    url: 'http://api.stackoverflow.com/1.1/stats',                                                                                                                                              
    dataType: 'jsonp',                                                                                                                                                                                                
    success: function() { console.log('Success!'); },                                                                                                                                                                                       
    error: function() { console.log('Uh Oh!'); }                                                                                                                                                              
});

但是当我在我的机器上用FireFox或Chrome打开文件并发出请求时，我会收到这个错误：

Resource interpreted as Script but transferred with MIME type application/json.
Uncaught SyntaxError: Unexpected token :
Uh Oh!

我不知道发生了什么事。我知道Stack Exchange API会对其响应进行Gzip压缩，这会导致任何问题吗？

- theabraham

你从服务器得到了什么？我得到了JSON - 而JSON不是JSON-P，它将数据封装在回调函数中，该函数必须在全局命名空间中，并且您在请求中告诉服务器（这是您的代码中没有看到的另一件事）。关键是，如果实际上是JSON，请不要告诉你的jQuery结果是JSONP。 - Mörre

3

因为在 StackOverflow 的其他地方建议使用 JSONP，所以我使用了它。当我使用 JSON 时，会出现这个错误：

XMLHttpRequest cannot load http://api.stackoverflow.com/1.1/stats. Origin null is not allowed by Access-Control-Allow-Origin.

- theabraham

不知道他们的API，但是从那个URL返回的内容显然是JSON，就像我说的一样。使用"dataType"只是告诉你的jQuery如何解释结果，而不是告诉服务器你想要JSONP。 - Mörre

2个回答

4

请尝试访问此网址：http://api.stackoverflow.com/1.1/stats?jsonp=callme。

"callme" 是您的回调函数名称 - 在您的全局命名空间（window 对象）中。

顺便说一下，如果您使用 Firefox 并安装了 JSONView 插件，则可以直接测试上述网址（以及您自己的网址进行比较）。

调用该网址后的结果：

callme({
  "statistics": [
...
  ]
})

- Mörre

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lonesomeday · Accepted Answer

要使SO API工作，您必须设置一个非传统的参数。而不是传统的callback，您需要传递一个jsonp参数。

此外，您不能使用JSONP进行POST操作。

$.ajax({                                                                                                                                                                                                        
    type: 'GET',                                                                                                                                                                                                 
    url: 'http://api.stackoverflow.com/1.1/stats',                                                                                                                                              
    dataType: 'jsonp',                                                                                                                                                                                                
    success: function() { console.log('Success!'); },                                                                                                                                                                                       
    error: function() { console.log('Uh Oh!'); },
    jsonp: 'jsonp'                                                                                                                                                
});

使用传统的XMLHTTPRequest不可能进行跨域AJAX，这是出于安全原因（被称为同源策略）。

有一个解决方法。 script标签不受此限制。这意味着您可以在文档中插入调用URL的script标签。如果您在脚本中定义了一个全局可访问的函数，并告诉远程服务器该函数的名称，服务器可以通过调用该函数来传递包装数据的代码。

您在此遇到的困难是与StackOverflow API相关的。通常，您将在请求中使用callback参数，以告诉服务器您的函数的名称。但是，StackOverflow的API要求您改用jsonp参数。