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.

The first parameter to $resource should be the complete URL http://ip-address/something/:id.json — remigio
– remigio, Commented Jun 14, 2013 at 12:30
Does your Angular App and "canned" resource run on same domain:port? If not, then Jquery: Why am I getting an OPTIONS request insted of a GET request?. — Stewie
– Stewie, Commented Jun 14, 2013 at 12:33
well, was a copy and paste mistake. I actually used the IP-Address in the url — leifg
– leifg, Commented Jun 14, 2013 at 13:02

leifg · Accepted Answer · 2013-06-17 13:30:35Z

9

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)

answered Jun 17, 2013 at 13:30

leifg

9,08814 gold badges57 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Onur Yıldırım Over a year ago

There is no such thing as useXDomain in Angular. It never made into the Angular code. github.com/angular/angular.js/issues/2956

Collectives™ on Stack Overflow

calling external api with AngularJS and ngResource

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related