Question

我正在开发一个应用程序，我必须使用Google的提升API获取某些点的提升，我仍然坚持臭名昭着的CORS问题。

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(){
    }
});

对于初学者，我只是试图查询一个固定点。当我这样做时，我在浏览器的控制台中收到一个CORS警报。

当我尝试dataType: 'JSONP'时，它可以正常工作，我从API获得了响应，但是我的浏览器抱怨响应中的响应有错误。基本上我试图将JSON解析为JSONP，这就是为什么我在响应中得到语法错误。

这是怎么回事？如何通过AJAX调用查询Elevation API？

Answer 1

如果您的站点有后端 api，您可以创建简单的端点以传递到 google api 并在服务器上执行 google 结果，其中 CORS 标头无关紧要。还可以让您受益于拥有更好的缓存系统。

Answer 2

我使用chrome的Allow-Control-Allow-Origin插件来解决这类问题。它允许您在chrome中启用/禁用CORS。 https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

Answer 3

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>');  
   });

}

如何解决Google API中的CORS问题？

3 个答案: