如何配置 Angular $resource (ngResource) 以使用 CORS 从另一个域中提取数据

Posted 2023-03-03

【中文标题】如何配置 Angular $resource (ngResource) 以使用 CORS 从另一个域中提取数据

【英文标题】：How to configure Angular $resource (ngResource) to pull data from another domain using 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 能给我举个例子吗？

【参考方案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 怎么办？从那以后我做了一些研究，我认为我的代码中可能只是一个错误，我将很快回到它并尝试修复它并在此处更新。