使用 jsonp 访问 stackoverflow API 会产生意想不到的结果答案

【问题标题】：Accessing stackoverflow API with jsonp gives unexpected result使用 jsonp 访问 stackoverflow API 会产生意想不到的结果
【发布时间】：2012-11-01 08:32:36
【问题描述】：

我正在尝试通过执行以下操作以 jsonp 作为数据类型访问 Stackoverflow API：

$(document).ready(function(){
        $.ajax({
          url: 'http://api.stackoverflow.com/1.1/tags/php/top-answerers/month',
          dataType: 'jsonp',
        });
      });

一旦我重新加载，我会在控制台中看到以下内容：

"Uncaught SyntaxError: Unexpected token :"

我在这里做错了什么？

【问题讨论】：

这个 API 好像不支持 JSONP，它返回的是普通的 JSON。

标签： ajax api jsonp

【解决方案1】：

来自https://api.stackexchange.com/docs

所有 API 响应都是 JSON，我们确实支持带有回调查询参数的 JSONP。 API 中的每个响应都在一个通用的“包装器”对象中返回，以便更轻松、更一致地解析。

所以你应该使用dataType: 'json' 而不是jsonp。

您还应该升级到 2.1 API，1.x API 已弃用 6 个月。

【讨论】：

使用 'json' 代替：XMLHttpRequest cannot load http://api.stackoverflow.com/1.1/tags/php/top-answerers/month. Origin http://localhost:26562 is not allowed by Access-Control-Allow-Origin.

【解决方案2】：

现在应用程序正在返回 Content-Type：application/json。

您可以通过将回调函数名称覆盖为 jsonp 来解决此问题，这将告诉服务器返回 Content-Type：application/javascript：

$(document).ready(function () {
    $.ajax({
        url: 'http://api.stackoverflow.com/1.1/tags/php/top-answerers/month',
        dataType: 'jsonp',
        jsonp: 'jsonp',
        success: function (data) {
            alert(data.top_users.length + ' users retrieved.');
        }
    });
});

关于 jsonp ajax 设置的信息：

jsonpString

覆盖 jsonp 请求中的回调函数名称。这个值将在 'callback=?' 中使用而不是 'callback'的一部分 url 中的查询字符串。所以 {jsonp:'onJSONPLoad'} 会导致 'onJSONPLoad=?'传递给服务器。从 jQuery 1.5 开始，设置 jsonp 选项为 false 可防止 jQuery 添加“？回调” 字符串到 URL 或尝试使用“=？”为转型。在在这种情况下，您还应该明确设置 jsonpCallback 设置。例如 { jsonp: false, jsonpCallback: "callbackName" }

【讨论】：