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"}]

你能看到什么问题吗？也许我应该从服务器返回的格式不对？Angular会触发错误回调,除了我设置的错误消息之外没有任何错误消息('错误').

Answer 1

@TheHippo是正确的,数据不应该只是一个普通的json响应.以下是针对AngularJS中的youtube端点的JSONP请求的工作示例.

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

• Angular的$ http.jsonp将请求查询字符串参数转换callback=JSON_CALLBACK为callback=angular.callbacks._0.
• 在调用youtube端点时,我需要使用alt=json-in-script而不是alt=json在查询字符串中指定服务,这是一个JSONP请求.这可以在他们的文档中找到.
• 结果比较这个网址到这一个,看看在你的浏览器JSON和JSONP响应之间的差异.
• 请查看开发人员工具中的 Chrome网络面板,以帮助您对请求/响应进行比较和排除故障.

我知道这个例子非常具体,但希望它有所帮助!

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"}
]);

编辑:如果其他人遇到了角度JSONP的问题,请同时阅读这个问题的答案,它包含有关角度如何处理实际回调函数的有用信息.