How to configure Angular $resource (ngResource) to pull data from another domain using CORS

Question

I'd like to be able to setup resources using $resource using CORS to request my data. I've got CORS working with $http but the same techniques don't apply to $resource and I was hoping someone can come to my rescue and show me how with $resource.

I've modified the last step of the Angular tutorial to use CORS by hacking the phonecatServices service, in the services.js file.

I found this example which uses the $http.defaults.useXDomain = true; delete $http.defaults.headers.common['X-Requested-With'];line to get angular to request the data using CORS but if I try $resource.defaults.useXDomain = true; I get the error: "Cannot set property 'useXDomain' of undefined".

I presume $resource doesn't have this property, so my question is, how do I configure $resource to make cross domain resource requests using CORS.

Here's my code:

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

I get the following error when I try to make the request: Object #<Resource> has no method 'push'

EDIT

I've tried setting up for $http and it works most of the time, but when the call is made to the resource query, in this case Phone.get(phoneId); this seems to throw the above error.

Calling code that I suspect is causing the error (from 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;
  }
}

If I remove the innards of the above method the code runs fine (without obtaining the image for the website), but I don't understand why this wouldn't work? I have set up the $http service to use CORS so that should pass it to $resource apparently.

Can anyone shed any light on it? (any working example code would be greatly appreciated).

EDIT: 13/08/13

Just so anyone visiting this question is aware, none of the answers below have really answered the question, I am researching an answer myself but if anyone spots this and has an answer I'd greatly appreciate it still.

EDIT: 06/09/13

Currently looking into this project, seems to allow everything I'm looking for: https://github.com/jpillora/xdomain

have you tried using a service instead? – Subtubes May 14 '13 at 23:22 — Subtubes, May 14 '13 at 23:22
could you give me an example please Edgar? – David Swindells May 15 '13 at 08:17 — David Swindells, May 15 '13 at 08:17

score 3 · Accepted Answer · answered Nov 12 '13 at 11:46

OK, the solution I've found for my project is xdomain: https://github.com/jpillora/xdomain

I accept that this may not be suitable for everyone but it's a decent cross browser solution and whilst we're stuck with IE<10 this seems to be the best solution. (I am aware IE8 and IE9 provide partial support but that as always with IE isn't full support and I don't want to have to waste time doing another work around for IE).

Thanks to everyone who provided answers to the question.

score 0 · Answer 2 · answered Jun 12 '13 at 14:55

0

I think this sample could work for you

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'
            }
          }
      });
  });

answered Jun 12 '13 at 14:55

mockguiver

1

thanks mate, I don't want to use JSONP though, what if I want to send a DELETE or PUT rather than just a GET? I've done a little research since and I think there might just be a bug in my code, I'm going to go back to it soon and try and fix it and update here. – David Swindells Jun 13 '13 at 15:47

score -1 · Answer 3 · answered Sep 17 '13 at 13:30

-1

Are you calling useXDomain = true in your app.config();

answered Sep 17 '13 at 13:30

David Beech

1,098
8
13

Yeah I got CORS working with $http so the config was setup right, I also used someone elses resource on a server from an example online (it's been taken down now) and that worked for $http but not $resource. Tbh, I think the XDomain resource I've added in the edit above will be the solution i'm going to go with. It seems to work with more browsers and I'm currently testing it on my project; i'll post back when I know more. Thanks for your answer though, glad the question hasn't died! – David Swindells Sep 18 '13 at 10:08

How to configure Angular $resource (ngResource) to pull data from another domain using CORS

3 Answers3

Linked