JSONP 请求返回错误：“Uncaught SyntaxError: Unexpected token :”答案

【问题标题】：JSONP request returning error: "Uncaught SyntaxError: Unexpected token :"JSONP 请求返回错误：“Uncaught SyntaxError: Unexpected token :”
【发布时间】：2011-05-18 14:03:29
【问题描述】：

所以我正在尝试使用以下 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 会压缩它的响应，这会造成任何麻烦吗？

【问题讨论】：

你从服务器得到什么？我得到 JSON - JSON 不是 JSON-P，它将数据封装在一个回调函数中，该函数必须在您的全局命名空间中，并且您在请求中告诉服务器（我在您的代码中没有看到的其他内容））。关键是，如果真的是 JSON，就不要告诉你的 jQuery 结果是 JSONP。
我使用了 JSONP，因为它在 StackOverflow 的其他地方被建议。当我使用 JSON 时，出现此错误：XMLHttpRequest cannot load http://api.stackoverflow.com/1.1/stats. Origin null is not allowed by Access-Control-Allow-Origin.
不知道他们的 API，但正如我所说，从该 URL 返回的显然是 JSON。使用“dataType”你只告诉你的jQuery如何解释结果，你不会告诉服务器你想要JSONP。

标签： javascript ajax jquery stackexchange-api

【解决方案1】：

您必须设置一个非常规参数才能使 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 标签不受此限制。这意味着您可以将script 标记插入到调用URL 的文档中。如果您在脚本中定义了一个全局可访问的函数并告诉远程服务器调用该函数的内容，则服务器可以传递封装数据的代码，以便在对该函数的调用中发送。

您在这里遇到的困难在于 StackOverflow API。按照惯例，你会在你的请求中使用callback 参数，告诉服务器你的函数被调用了什么。但是，StackOverflow 的 API 要求您改用 jsonp 参数。

【讨论】：

"jsonp" 是参数 - 但它的值是一个全局命名空间中的函数名称，一旦结果进入就会调用它。
正如我所说，看到你的 Q 的 cmets，你必须告诉服务器你想要 JSONP，否则它会向你发送 JSON！如何取决于服务器，这个需要一个带有回调函数名称的参数“jsonp”。
这对 jQuery 来说很好——我告诉（并展示了）他 SERVER 想要什么。知道背景而不是一个特定的库如何实现它不是更好吗？？？ “我只学会了按红色按钮，但是这个是绿色的，所以我不能开灯，对不起”。开个玩笑：）（嗯，不完全）
是的，我们都知道，你的意思是？见上文，我想我说的一切。您更愿意只告诉他有关 jquery 的信息（当然，这是他的问题）——而我更愿意扩大范围以告诉他它实际上是如何工作的，而与所使用的 lib 无关。
哇，哇！我感谢你们俩的帮助。我认为这次图书馆/api特定的问题是合适的。我以前从来不知道 JSONP，当我的 JSON 请求不起作用时我很恼火（当其他 API 可以顺利工作时）。我到了一个地步，我只是一种霰弹枪调试来解决这个问题。但是，我发现 this post 有助于解释 JSONP 的作用。

【解决方案2】：

试试这个网址：http://api.stackoverflow.com/1.1/stats?jsonp=callme

“callme”是您的回调函数的名称 - 在您的 GLOBAL NAMESPACE（窗口对象）中。

顺便说一下，如果你运行的是 Firefox 并安装了 JSONView 插件，你可以直接测试上面的 URL（和你的 URL 进行比较）。

调用 URL 的结果：

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

【讨论】：