calling external api with AngularJS and ngResource

Question

we are currently developing a little AngularJS project and starting from the frontend, so pure HTML and JavaScript.

However, we need to make some API calls using ngResource. At the moment we are using canned to mock the json return value.

Say this returns a JSON:

GET http://ip-address/something/1.json

I want to be able to call this from ngResource:

app.controller('SomethingCtrl', function ($scope, $resource) {
  Something = $resource("http://ip-address/something/:id", {id: "@id"});
  $scope.something = Something.get({id:1});
});

For some reason this does not work, although the endpoint is working correctly. Angular just makes an option request to this URL.

Is this some kind of XSS protection magic and how do I solve it?

Update: Added the IP-Address to example

EDIT:

I have changed the mock API server, so that CORS is allowed.

I return now this header and the OPTIONS request goes through

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:*

But now, the get request gets cancelled (no response gets returned). So I suppose Angular does some kind of magic.

Answer 1

Ok I figured it out. You need to inject the $http service and set the useXDomain flag.

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

Furthermore. Every request to the service must return the correct CORS headers (not only the OPTIONS request)