使用jsonp的AngularJS资源服务失败

Question

我正在尝试在AngularJS中获取rest api的JSON输出.以下是我面临的问题:

• Rest api url中有一个端口号,由AngularJS为变量插入.我为此尝试了几个决议是徒劳的.
• 我遇到了JSONP方法的问题.Rest api不托管在同一个域/服务器上,因此简单的get不起作用.
• 其余api的参数是斜杠分隔而不是HTML查询字符串.其中一个参数是电子邮件地址,我认为'@'符号也会导致一些问题.我也无法解决这个问题.

我的休息api看起来像:http://myserver.com:8888/dosomething/me@mydomain.com/arg2.示例代码/文档将非常有用.

Answer 1

我在这个问题上遇到了很多困难,希望这将有助于未来的人:)

JSONP期望一个函数回调,一个常见的错误是调用返回JSON的URL并且你得到一个Uncaught SyntaxError:Unexpected token: error.相反,JSONP应该返回这样的东西(不要挂在示例中的函数名称):

angular.callbacks._0({"id":4,"name":"Joe"})

该文档告诉您出于某种原因在URL上传递JSON_CALLBACK.这将被回调函数名称替换以处理返回.每个JSONP请求都分配了一个回调函数,因此如果您执行多个请求,则可以使用angular.callbacks._1,angular.callbacks._2等处理它们.

考虑到这一点,您的请求应该是这样的:

var url = 'http://myserver.com:8888/dosomething/me@mydomain.com/arg2';
$http.jsonp(url + '?callback=JSON_CALLBACK')
   .then(function (response) {
       $scope.mydata = response.data;
       ...

然后AngularJS将实际请求(替换JSON_CALLBACK):

http://myserver.com:8888/dosomething/me@mydomain.com/arg2?callback=angular.callbacks._0

有些框架支持JSONP,但是如果你的api没有自动执行,你可以从查询字符串中获取回调名称来封装json.示例在Node.js中:

var request = require('request');
var express = require('express');
var app = express();

app.get('/', function(req, res){
    // do something to get the json
    var json = '{"id":4,"name":"Joe"}';

    res.writeHead(200, {"Content-Type": "application/javascript"});
    res.write(req.query.callback + '(' + json + ')');
    res.end();
});
app.listen(8888);