【问题标题】:How to configure Angular $resource (ngResource) to pull data from another domain using CORS如何配置 Angular $resource (ngResource) 以使用 CORS 从另一个域中提取数据
【发布时间】:2013-05-09 09:19:45
【问题描述】:

我希望能够使用 $resource 使用 CORS 来请求我的数据来设置资源。我已经让 CORS 与 $http 一起工作,但相同的技术不适用于 $resource,我希望有人能来拯救我并告诉我如何使用 $resource。

我已经修改了last step of the Angular tutorial 以通过在 services.js 文件中破解 phonecatServices 服务来使用 CORS。

我发现this example 使用 $http.defaults.useXDomain = true;删除 $http.defaults.headers.common['X-Requested-With']; 行以获取角度以使用 CORS 请求数据,但如果我尝试 $resource.defaults.useXDomain = true;我收到错误:“无法设置未定义的属性‘useXDomain’”。

我认为 $resource 没有这个属性,所以我的问题是,如何配置 $resource 以使用 CORS 进行跨域资源请求。

这是我的代码:

angular.module('phonecatServices', ['ngResource']).
    factory('Phone', function($resource){
  return $resource('http\\://localhost\\:8080/:phoneId.json', {}, {
    query: {params:{phoneId:'phones'}, isArray:true}
  });
});

我在尝试发出请求时收到以下错误:Object # has no method 'push'

编辑

我已经尝试设置 $http 并且它大部分时间都可以工作,但是当调用资源查询时,在本例中为 Phone.get(phoneId);这似乎引发了上述错误。

我怀疑导致错误的调用代码(来自 controllers.js step 11 angular tutorial):

function PhoneDetailCtrl($scope, $routeParams, Phone) {
  $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
    $scope.mainImageUrl = phone.images[0];
  });

  $scope.setImage = function(imageUrl) {
    $scope.mainImageUrl = imageUrl;
  }
}

如果我删除上述方法的内部代码,代码运行良好(没有获取网站的图像),但我不明白为什么这不起作用?我已将 $http 服务设置为使用 CORS,因此显然应该将其传递给 $resource。

任何人都可以对此有所了解吗? (任何工作示例代码将不胜感激)。

编辑:13/08/13

所以任何访问这个问题的人都知道,下面的答案都没有真正回答这个问题,我自己正在研究一个答案,但如果有人发现这个并有答案,我仍然会非常感激。

编辑:2013 年 6 月 9 日

目前正在研究这个项目,似乎允许我正在寻找的一切:https://github.com/jpillora/xdomain

【问题讨论】:

  • 您是否尝试过改用服务?
  • Edgar 能给我举个例子吗?

标签: angularjs jsonp cors angular-resource angularjs-resource


【解决方案1】:

好的,我为我的项目找到的解决方案是 xdomain:https://github.com/jpillora/xdomain

我承认这可能并不适合所有人,但它是一个不错的跨浏览器解决方案,虽然我们被 IE

感谢所有提供问题答案的人。

【讨论】:

    【解决方案2】:

    你在 app.config() 中调用 useXDomain = true;

    【讨论】:

    • 是的,我让 CORS 与 $http 一起工作,因此配置设置正确,我还在服务器上使用了其他人的资源,来自一个在线示例(现在已被删除)并且适用于 $http 但是不是$资源。 Tbh,我认为我在上面的编辑中添加的 XDomain 资源将是我要使用的解决方案。它似乎适用于更多浏览器,我目前正在我的项目中对其进行测试;当我知道更多时,我会回复。不过感谢您的回答,很高兴这个问题没有消失!
    【解决方案3】:

    我认为这个示例对你有用

    angular.module('myBeerApp.services', ['ngResource']).
      value('version', '0.1').
      factory('beerDB', function($resource) {
        return $resource('URL',{
          alt:'json',
          appToken:'TOKEN',
          q:'rock',
          callback: 'JSON_CALLBACK'
        },
          {
            get: {
              method:'JSONP',
              headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
                }
              }
          });
      });
    

    【讨论】:

    • 谢谢伙计,不过我不想使用 JSONP,如果我想发送 DELETE 或 PUT 而不仅仅是 GET 怎么办?从那以后我做了一些研究,我认为我的代码中可能只是一个错误,我将很快回到它并尝试修复它并在此处更新。
    猜你喜欢
    • 2016-02-27
    • 1970-01-01
    • 2017-09-14
    • 1970-01-01
    • 2014-06-11
    • 1970-01-01
    • 1970-01-01
    • 2015-08-22
    • 2011-12-11
    相关资源
    最近更新 更多