javascript - 使用 AngularJS 和 ngResource 调用外部 api

Question

我们目前正在开发一个 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。

我现在返回这个 header 并且 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 会施展某种魔法。

Answer 1

好吧，我明白了。您需要注入(inject) $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 header (不仅是 OPTIONS 请求)