0

I'm trying to do a simple get request in Angular to a certain API, but I get the following:

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/elevation/json?locations=39.7391536,-104.9847034&key=MY_KEY. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://my-site.herokuapp.com' is therefore not allowed access.

I have tried many different APIs just to test if maybe it's a setting that needs enabled on my target API or if it's just something in general with any ol' API I try to access. I got this error with all of them, so at this point it's GOTTA be something I'm doing wrong.

Also to note, I'm pushing to heroku so it's up and running on a web server, not local host.

Here's my angular code below: 

$http.get("https://maps.googleapis.com/maps/api/elevation/json?locations=39.7391536,-104.9847034&key=MY_KEY")
                .then(function(response) {
                    vm.output = response.data;
                });

I've opened about a thousand browser tabs searching for info on this, and many say "You don't. The server you are making the request to has to implement CORS to grant JavaScript from your website access." or something like that. But I'm trying Google and obviously they should allow cross-site requests, so it's gotta be something I'm doing wrong. Thanks for any help.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Kenny
  • 2,124
  • 3
  • 33
  • 63
  • Same Origin Policy. You can use CORS, JSONP, or move your API call to the server but you want access a domain outside of your domain with pure client side code. – mwilson Mar 31 '17 at 20:44
  • Are you saying the request client side is possible, but only using some kind of library or special method? Or are you saying the only way possible is to move the request to the server side, and that it's impossible client side? Thanks. – Kenny Mar 31 '17 at 20:46
  • It's a confusing answer. Look into what the Same Origin Policy is (https://en.wikipedia.org/wiki/Same-origin_policy) and also look at workarounds using client side (http://stackoverflow.com/questions/3839966/can-anyone-explain-what-jsonp-is-in-layman-terms and https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). The problem you're seeing is quite common and there' only a few solutions to it. If you have a server (like node) available, you can move the request to there and it'll work fine. – mwilson Mar 31 '17 at 20:51
  • Yeah, all this is running in Node. So I'll just move the request over to node. Thanks for the feedback and resources! – Kenny Mar 31 '17 at 20:52
  • That's the best option. Make a REST API on your node server to serve as a 'middleware' to the API you're trying to reach and just call your own endpoint. Works like a charm – mwilson Mar 31 '17 at 20:54

1 Answers1

1

The issue you're running into is quite common. You are running up against the Same origin Policy. To better understand the problem you're facing, read through some of that information but at a high level, you cannot call another domain from a different domain within JavaScript. There are workarounds such as JSONP and CORS but I would recommend moving the API call to server side code so you don't run into this.

Community
  • 1
  • 1
mwilson
  • 12,295
  • 7
  • 55
  • 95