首先得给你明确结论：没有任何办法能在前端直接发起请求时，把API密钥藏起来不被网络面板发现。不管你怎么混淆、编码密钥，浏览器最终发送的请求里必须包含真实密钥才能通过Google的验证，而网络面板会显示完整的请求参数——懂点开发的人只要打开DevTools就能轻松拿到你的密钥，混淆操作只是自欺欺人。

那该怎么解决这个问题？必须调整实现方案，核心思路是用后端代理请求，具体步骤如下：

• 前端只负责收集用户输入的地点，然后把这个地点发送到你自己的后端接口（比如/api/get-geocode）
• 后端接收到地点参数后，从环境变量里读取你的Google Maps API密钥，再由后端发起对https://maps.googleapis.com/maps/api/geocode/json的请求
• 后端把Google返回的经纬度数据处理后（可以只返回需要的经纬度，过滤掉无关信息），再返回给前端
• 前端拿到经纬度后，调用Google Maps JS SDK完成地图标记（这一步的SDK密钥可以通过设置HTTP Referrer限制，只允许你的前端域名访问，安全性有保障）

另外，就算用了后端代理，也别忘了给你的API密钥加上多重访问限制：

• 在Google Cloud控制台里，给密钥设置IP限制，只允许你的后端服务器IP访问
• 限制密钥只能用于Geocoding API，避免被人拿去调用其他付费API
• 若使用Google Maps JS SDK，设置HTTP Referrer限制，仅开放给你的前端域名

这样一来，既保证了密钥不会暴露给前端用户，又能完成你需要的功能——这是目前最安全、最通用的解决方案，没有替代方案。

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