Angular, $http to an api (cross domain)

Question

I am trying to play around with an api on my local machine. I currently have a grunt server running on my localhost:9000 for my development environment and I'm trying to call out to seismi's api for fun to play around with some data like so:

$http.get('http://www.seismi.org/api/eqs/2011/03?min_magnitude=6').
  success(function(data, status, headers, config) {
    $scope.seismiData = data;
    console.log($scope.seismiData);
  }).
  error(function(data, status, headers, config) {
    console.log("error with initial fetch");    
  });

This is just using the example on the page- http://www.seismi.org/api/ . When I do this my console is giving me back this.

 XMLHttpRequest cannot load http://www.seismi.org/api/eqs/2011/03?min_magnitude=6. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.

I'm still pretty new to this so I'm not sure how to get around this so I can use the api's returned json.If someone could point me in the right direction I would greatly appreciate it. Thanks!

seismi.org basically doesn't allow you to access their api by a XHR. You would need to create an api server for yourself, in which you fetch data from seismi.org and make it available to your angular app. If you are just playing around with angular and want to test out things, you can start chrome without security options, so CORS will be disabled. In your chrome folder, use following command: chrome.exe --args --disable-web-security — Himmet Avsar
– Himmet Avsar, Commented Jan 20, 2015 at 23:52
@HimmetAvsar is is possible with jsonp? I'd prefer not to close the stuff down in my chrome. — ajmajmajma
– ajmajmajma, Commented Jan 21, 2015 at 0:27

user12121234 · Accepted Answer · 2015-01-21 01:18:19Z

2

This is a CORS / CSRF issue. Please do some research on those two, there are many very good Stackoverflow answers explaining why you are getting this error.

If you are just playing around with the seismi's api and only need to read data, you will be able to use $http.jsonp instead of $http.get.

edited Jan 21, 2015 at 1:18

answered Jan 21, 2015 at 1:10

user12121234

2,5792 gold badges28 silver badges29 bronze badges

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

1 Comment

ajmajmajma Over a year ago

I'm having some trouble with jsonp, but it seems like the right direction.

Sagi Dayan · Accepted Answer · 2015-02-16 13:01:58Z

2

There is also an easy way to enable the CROS issue.

if you are using chrome and you just want to test out stuff in a localhost environment. use this Chrome extention (Allow-Control-Allow-Origin: *) . install is and anable the CROS origin.

This method will allow you to keep your code as is and still be able to Play around with you app API

Hope this helps,
cheers!

answered Feb 16, 2015 at 13:01

Sagi Dayan

1281 silver badge7 bronze badges

Collectives™ on Stack Overflow

Angular, $http to an api (cross domain)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related