Angularjs JSONP不起作用

Question

我可能在这里遗漏了一些东西，但我无法使这个 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 触发错误回调没有任何错误消息。

Answer 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，以帮助比较您的请求/响应并进行故障排除。

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

Answer 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 如何处理实际回调函数的有用信息。

Answer 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上的例子