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

Posted 2023-03-04

【中文标题】如何解决 Google API 中的 CORS 问题？

【英文标题】：How to get around the CORS issue in Google's API?

【发布时间】：2015-10-02 23:37:41

【问题描述】：

我正在开发一个应用程序，我必须使用 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？

【问题讨论】：

“我的浏览器抱怨响应中有错误”——确切地说，它抱怨什么？引用错误信息，不要笼统地描述它。

Read the documentation 顶部有一个巨大的框，指向为客户端 JS 设计的 API 版本。

请参考我对 CORS 问题的回答：How to bypass CORS issue ?

【参考方案1】：

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

【参考方案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>');  
   );  

【参考方案3】：

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

【讨论】：

我不确定 6 年前我在做什么，但是，是的，我自己后端的代理 API 似乎是解决这个问题以避免 CORS 问题的好方法！ B）