在 AngularJS 中为 $http 服务使用 JSONP 方法
Posted
技术标签:
【中文标题】在 AngularJS 中为 $http 服务使用 JSONP 方法【英文标题】:Using JSONP method for $http service in AngularJS 【发布时间】:2013-06-08 09:15:03 【问题描述】:我是 AngularJS 的相对新手,并且已经成功地将 $http 的 GET 方法用于基本的概念验证应用程序,我现在正在尝试使用 JSONP 方法从远程 URL 中提取一些 JSON我被给了。我在这里创建了一个基本的 plunker 来展示我正在尝试做的事情:http://plnkr.co/edit/Joud0ukAzhgvNM0h9KjB?p=preview
我在控制器中使用 HTTP 请求,如下所示:
$http(method: 'jsonp', url: 'http://ec2-54-229-49-250.eu-west-1.compute.amazonaws.com/country?callback=JSON_CALLBACK').
success(function(data)
$scope.countries = data;
console.log('success');
).
error(function(data)
console.log('error');
);
...但是我什么也没得到(控制台中的“错误”除外)。我知道 URL 正在返回有效的 JSON (http://ec2-54-229-49-250.eu-west-1.compute.amazonaws.com/country?callback=angular.callbacks._0),但我没有得到任何回报......
【问题讨论】:
您可以查看以下网址来检查您的功能:gdata.youtube.com/feeds/api/users/orbitalofficial/… 【参考方案1】:JSONP 要求您将 JSON 响应包装到 javascript 函数调用中。 当您执行 JSONP 时,请求查询字符串将设置一个名为“回调”的参数,该参数将告诉您的服务器如何包装 JSON 响应。
所以响应应该是这样的:
callback([
"id": "1", "name": "John Doe",
"id": "2", "name": "Lorem ipsum",
"id": "3", "name": "Lorem ipsum"
]);
Angular 会将回调参数定义为 angular.callbacks._0, angular.callbacks._1, angular.callbacks._2 ... 取决于它等待响应的请求数量,因此如果您执行单个请求,响应应该是:
angular.callbacks._0([
"id": "1", "name": "Lorem ipsum",
"id": "2", "name": "Lorem ipsum",
"id": "3", "name": "Lorem ipsum"
]);
服务器应使用请求字符串中的回调参数来相应地设置响应。
检查您的Plunker's 网络活动,您将看到该请求正在设置回调参数,但您得到的响应并未包含在其中。
【讨论】:
啊,我明白了——在那种情况下,我想我需要看看是否可以修改响应以适应这种情况。谢谢 有没有办法在 js 应用程序中获取这个非包装响应? 我不这么认为,浏览器实现了same-origin policy,就我现在而言,JSONP 是发出跨域请求的唯一方法。以上是关于在 AngularJS 中为 $http 服务使用 JSONP 方法的主要内容,如果未能解决你的问题,请参考以下文章
在AngularJS指令中为$ http.get加载模板属性
AngularJS:使用 FabricJS/Canvas 进行测试
在AngularJS中为jQuery datepicker动态设置最大限制