title: How to configure Angular $resource (ngResource) to pull data from another domain using CORS
body: <p>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.</p>
  
  <p>I've modified the <a href="http://docs.angularjs.org/tutorial/step_11" rel="nofollow">last step of the Angular tutorial</a> to use CORS by hacking the phonecatServices service, in the services.js file. </p>
  
  <p>I found <a href="http://jsfiddle.net/ricardohbin/E3YEt/" rel="nofollow">this example</a> 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". </p>
  
  <p>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. </p>
  
  <p>Here's my code: </p>
  
  <pre><code>angular.module('phonecatServices', ['ngResource']).
      factory('Phone', function($resource){
    return $resource('http\\://localhost\\:8080/:phoneId.json', {}, {
      query: {params:{phoneId:'phones'}, isArray:true}
    });
  });
  </code></pre>
  
  <p>I get the following error when I try to make the request: Object #&lt;Resource&gt; has no method 'push'</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>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. </p>
  
  <p>Calling code that I suspect is causing the error (from controllers.js <a href="http://docs.angularjs.org/tutorial/step_11" rel="nofollow">step 11 angular tutorial</a>): </p>
  
  <pre><code>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;
    }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Can anyone shed any light on it? (any working example code would be greatly appreciated).</p>
  
  <p>EDIT: 13/08/13</p>
  
  <p>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.</p>
  
  <p>EDIT: 06/09/13</p>
  
  <p>Currently looking into this project, seems to allow everything I'm looking for: <a href="https://github.com/jpillora/xdomain" rel="nofollow">https://github.com/jpillora/xdomain</a></p>