Angularjs JSONP不起作用

Posted 2023-03-03

【中文标题】Angularjs JSONP不起作用

【英文标题】：Angularjs JSONP not working

【发布时间】：2013-04-27 00:46:06

【问题描述】：

我可能在这里遗漏了一些东西，但我无法使这个 JSONP 请求工作，这里是代码：

var url =  'http://' + server + '?callback=JSON_CALLBACK';
$http.jsonp(url)
    .success(function(data)
       console.log('success');
    )
    .error(function () 
      console.log('error')
    );

请求触发正常，我收到以下格式的响应（带有标头 Content-Type:application/json）：

    ["id": "1", "name": "John Doe",
     "id": "2", "name": "Lorem ipsum",
     "id": "3", "name": "Lorem ipsum"]

你能看出什么不对吗？也许我应该从服务器返回的格式不正确？ 除了我设置的错误消息（'error'）之外，Angular 触发错误回调没有任何错误消息。

【问题讨论】：

你能发一个 Plunker 吗？

你在 fiddler 或 firebug 中看到了什么反应

响应看起来不对，应该是对请求指定的回调函数的函数调用

@joakimbl 是正确的。那不是 JSONP，那只是 JSON。您的响应应该是一个 javascript 文件，其对象字面量在以您传递的回调命名的函数内返回。

【参考方案1】：

@TheHippo 是正确的，数据不应该只是简单的 json 响应。 Here is a working example 针对 AngularJS 中的 youtube 端点的 JSONP 请求。

在这个例子中有几点需要注意：

Angular 的$http.jsonp 将请求查询字符串参数从callback=JSON_CALLBACK 转换为callback=angular.callbacks._0。 调用 youtube 端点时，我需要通过在查询字符串中使用 alt=json-in-script 而不是 alt=json 向服务指定这是一个 JSONP 请求。这是在他们的documentation. 中找到的 比较this url 和this one 的结果，查看浏览器中JSON 和JSONP 响应之间的区别。 查看开发者工具中的Chrome Network Panel，以帮助比较您的请求/响应并进行故障排除。

我知道这个示例非常具体，但希望对您有所帮助！

【讨论】：

感谢 TheHippo！非常有用的 cmets。

@Gloopy - 有用的信息和示例 jsfiddle 对调试我的代码非常有帮助，非常感谢。

终于找到了一个可行的解决方案！使用 smartthings 只是为了在此处删除关键字而遇到了这个问题。

不幸的是，用于此示例的 Youtube 服务不再有效。 ***.com/a/30685729/1014710 表明可以使用 Google Developers API 密钥来完成。

【参考方案2】：

JSONP 要求您将数据包装到 JavaScript 函数调用中。所以从技术上讲，您返回的是 JavaScript 文件而不是 Json 文件。

从服务器返回的数据应该是这样的：

// the name should match the one you add to the url
JSON_CALLBACK([
    "id": "1", "name": "John Doe",
    "id": "2", "name": "Lorem ipsum",
    "id": "3", "name": "Lorem ipsum"
]);

编辑：如果其他人偶然发现 Angular 的 JSONP 问题，请同时阅读this answer to this question，它包含有关 Angular 如何处理实际回调函数的有用信息。

【讨论】：

解决了！谢谢。 TheHippo 如果您可以编辑您的答案以包含@Gloopy 评论的内容：“Angular 的 $http.jsonp 将请求查询字符串参数从 callback=JSON_CALLBACK 转换为 callback=angular.callbacks._0”，因此响应不完全是 JSON_CALLBACK() 而是 angular .callbacks._0([ "id":"1", "name":"John Doe", "id":"2", "name":"Lorem ipsum"]);如果有多个请求，则第二个 jsonp 将请求 querystring callback=JSON_CALLBACK 转换为 angular.callbacks._1 等等，所以在我的情况下（php 服务器）我使用 $_GET['callback'] 来获得正确的回调名字。

【参考方案3】：

如果响应数据是“纯”JSON，我们可以使用 Angular 的 $http.get 来处理它。

$http.get(url).
  then(function(response) 
    // this callback will be called asynchronously
    // when the response is available
    $scope.responseArray = response.data;
 , function(response) 
    // called asynchronously if an error occurs
    // or server returns response with an error status.
 );

参考w3schools上的例子

【讨论】：

仅当您设置了 CORS 时

这个和jsonp完全没有关系