使用AngularJS和ngResource调用外部api

时间:2013-06-14 12:03:52

标签: javascript angularjs

我们目前正在开发一个小的AngularJS项目,从前端开始,所以纯HTML和JavaScript。

但是,我们需要使用ngResource进行一些API调用。目前我们使用canned来模拟json返回值。

假设这返回一个JSON:

GET http://ip-address/something/1.json

我希望能够从ngResource中调用它:

app.controller('SomethingCtrl', function ($scope, $resource) {
  Something = $resource("http://ip-address/something/:id", {id: "@id"});
  $scope.something = Something.get({id:1});
});

由于某种原因,虽然端点工作正常,但这不起作用。 Angular只对该URL发出选项请求。

这是某种XSS保护魔法,我该如何解决?

更新:添加了IP地址到示例

编辑:

我已经更改了模拟API服务器,因此允许使用CORS。

我现在返回此标题,OPTIONS请求通过

Access-Control-Allow-Headers:X-Requested-With
Access-Control-Allow-Max-Age:86400
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, HEAD, OPTIONS
Access-Control-Allow-Origin:*

但是现在,get请求被取消(没有返回响应)。所以我认为Angular会有某种魔力。

1 个答案:

答案 0 :(得分:7)

好的我明白了。您需要注入$ http服务并设置useXDomain标志。

app.controller('SomethingCtrl', function ($scope, $http, $resource) {
  $http.defaults.useXDomain = true;
  Something = $resource("http://ip-address/something/:id", {id: "@id"});
  $scope.something = Something.get({id:1});
});

此外。对服务的每个请求都必须返回正确的CORS头(不仅是OPTIONS请求)