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

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 标头并不重要。还为您带来了拥有更好的缓存系统的好处。