jsonp - 带有 jsonp 的 AngularJS 资源服务失败

Question

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

• Rest api url 中有端口号，AngularJS 为变量插入端口号。为此，我尝试了多种解决方案，但都没有成功。
• 我在使用 JSONP 方法时遇到问题。 Rest api 未托管在同一域/服务器上，因此简单的获取无法正常工作。
• 其余 api 的参数是斜杠分隔的，不像 HTML 查询字符串。其中一个参数是电子邮件地址，我认为“@”符号也会引起一些问题。我也无法解决这个问题。

我的休息 api 看起来像:http://myserver.com:8888/dosomething/me@mydomain.com/arg2。示例代码/文档真的很有帮助。

Answer 1

我在这个问题上苦苦挣扎，所以希望这对将来的人有所帮助:)

JSONP 需要一个函数回调，一个常见的错误是调用一个返回 JSON 的 URL，然后你会得到一个Uncaught SyntaxError: Unexpected token : 错误。相反，JSONP 应该返回类似这样的内容(不要纠结于示例中的函数名称):

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

documentation告诉您出于某种原因在 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没有自动支持，你可以从querystring中获取回调名称来封装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);