How to get around the CORS issue in Google's API?

Question

I am working on an application where I have to fetch elevation for some points using Google's elevation API and I am stuck on the infamous CORS problem.

var elevationUrl = 'https://maps.googleapis.com/maps/api/elevation/json?locations=39.7391536,-104.9847034&key=AIzaSyAgXFgUVR4Nia7pegX_0hcz0aNevCKAa58';

$.ajax({
    url: elevationUrl,
    type: 'GET',
    // dataType: 'JSONP',
    success: function(){
    }
});

For starters I just tried to query a fixed point. When I do this, I get a CORS alert in my browser's console.

When I tried the dataType: 'JSONP', it works and I get a response from the API but my browser complains that the response has an error in the response which it doesn't. Basically I am trying to parse JSON as JSONP which is why I am getting the syntax error in the response.

What is the way around this? How to query the Elevation API via AJAX calls?

"my browser complains that the response has an error in the response" — What, precisely, does it complain about? Quote the error message, don't just describe it in vague terms. — Quentin
– Quentin, Commented Jul 14, 2015 at 11:13
Read the documentation which has a massive box at the top pointing towards a version of the API designed for client side JS. — Quentin
– Quentin, Commented Jul 14, 2015 at 11:19
Please refer to my answer regarding to the CORS issue there: How to bypass CORS issue ? — Nizar B.
– Nizar B., Commented Jul 14, 2015 at 13:43

Shaun Whyte · Accepted Answer · 2021-05-07 04:05:35Z

3

If you have a backend api for your site you can make simple endpoint to pass through to the google api and execute the google result on the server, where the CORS header doesnt matter. Gives you the benefit of having a better caching system as well.

answered May 7, 2021 at 4:05

Shaun Whyte

665 bronze badges

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

1 Comment

Rohan Over a year ago

I am not sure what I was doing 6 years back, but yeah, a proxy API in my own back end seems like a good way to go about this problem to avoid CORS problem! B)

CiaranC · Accepted Answer · 2017-12-12 15:28:12Z

-1

I use the Allow-Control-Allow-Origin plugin for chrome to get around this kind of thing. It will allow you to enable/disable CORS in chrome. https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

answered Dec 12, 2017 at 15:28

CiaranC

344 bronze badges

Comments

ashish bandiwar · Accepted Answer · 2019-08-23 10:33:08Z

-2

https://medium.com/@akhouri/cors-issues-and-resolutions-803e6abda52a

OR

Make data type to jsonp

$('#btnAll').click(function () {  
$.ajax({  
   type: 'Get',  
   url: 'http://localhost:60545/api/student',  
   dataType: 'jsonp',  
success: function myfunction(data) {  
   $.each(data, function myfunction(index, val) {  
      $('#ulStudents').append('<li>' + val.FirstName + '' + val.LastName + '</li>');  
   });

}

answered Aug 23, 2019 at 10:33

ashish bandiwar

4141 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to get around the CORS issue in Google's API?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related