CODEWITHSUNDEEP
angularjshttp
ajmajmajma
ajmajmajma

Reputation: 14216

Angular, $http to an api (cross domain)

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!

Upvotes: 0

Views: 546

Answers (2)

Sagi Dayan
Sagi Dayan

Reputation: 128

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!

Upvotes: 2

user12121234
user12121234

Reputation: 2569

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.

Upvotes: 2

Related Questions