CORS error when using Google Elevation API

Question

I'm trying to use Google elevation API with an AJAX request. It doesn't work and when I do console.log(ajax.responseText) I'm getting this error :

Cross-Origin Request Blocking: The Same Origin policy does not allow you to view the remote resource located at https://maps.googleapis.com/maps/api/elevation/json?locations=39.7391536 , -104.9847034 & key = AIzaSyBXSbBWMZtGL2whXVC7T8wFhQcwcKGRuF4. Reason: The CORS header "Access-Control-Allow-Origin" is missing.

Does someone knows how to solve this problem ?

Answer 1

You can use a CORS proxy such as CORS-anywhere. A hosted CORS proxy can be found here (herokuapp.com). Usage is as follows (append location etc. yourself):

https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/elevation/json

Answer 2

If you are using cross domains open the web.config locate <httpProtocol> and add:

<httpProtocol>
 <customHeaders>
 <add name="Access-Control-Allow-Origin" value="*" />
 <add name="Access-Control-Allow-Credentials" value="true" />
 <add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS" /> 
 <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
 </customHeaders>
</httpProtocol>

Answer 3

A comment to this similar question on SO points to the Elevation API's documentation, which suggests to use the Maps JS API for client-side requests. It has a handy getElevationForLocations() method that should not throw a CORS error.