调用Google Places API时Axios报网络错误但Python请求正常，如何解决？

关于两种请求结果差异的原因 #

• 不是Python requests的默认请求头导致的差异。跨域限制是浏览器端的同源策略独有的安全机制，只会限制前端JavaScript（比如Axios）在浏览器环境下发起的跨域请求。
• Python requests属于后端/本地脚本发起的HTTP请求，不受浏览器同源策略约束，所以只要URL和参数正确就能正常拿到返回结果。

跨域问题的解决方案 #

方案1：使用Google官方提供的Maps JavaScript API接入Places服务 #

这是最推荐的前端接入方案，Google官方的前端SDK已经处理了跨域适配问题，你只需要引入SDK、配置API密钥后调用对应的Places方法即可，无需直接请求HTTP接口。

方案2：自建后端代理服务 #

你可以自己写一层简单的后端接口：

1. 前端Axios请求你自己的同域后端接口，把查询参数传给后端
2. 后端接收到参数后，用服务端HTTP客户端（比如Python requests、Node.js axios等）向Google Places API发起请求
3. 后端拿到Google返回的结果后再返回给前端
   服务端之间的HTTP请求没有跨域限制，该方案同时还能避免你的API密钥直接暴露在前端代码中，降低密钥被盗刷的风险。

方案3：本地开发临时使用前端代理 #

如果只是本地开发调试用，可以在前端项目的开发服务中配置代理：

• Vue项目：在vue.config.js中配置devServer.proxy，把指向Google Places API的请求路径代理到官方域名
• React项目：在package.json中添加"proxy": "https://maps.googleapis.com"配置
  该方案仅适用于本地开发场景，生产环境无法生效。

额外注意事项 #

不要直接在生产环境前端代码中硬编码Google API密钥，很容易被爬虫抓取后盗刷产生高额费用，建议给API密钥配置访问来源限制，仅允许你的业务域名/服务IP调用。

内容的提问来源于stack exchange，提问作者GoBig06