React中如何安全隐藏作为Props传入的Google Maps API密钥

你在构建带Marker的Google Map组件时，遇到两个核心问题：

1. 使用import.meta.env传入API密钥时出现编译错误
2. 希望找到安全可靠的方式处理前端传入的Google Maps API密钥

一、解决import.meta.env的编译错误 #

import.meta.env是Vite项目专属的环境变量语法，不同构建工具的环境变量写法不同，对应调整即可：

1. 若使用Create React App（CRA） #

CRA要求环境变量以REACT_APP_为前缀，代码中通过process.env访问：

<Wrapper apiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY} render={render}>
  <GoogleMap />
</Wrapper>

同时在项目根目录的.env文件中配置：

REACT_APP_GOOGLE_MAPS_API_KEY=你的密钥内容

2. 若使用Webpack（非Vite/CRA） #

先安装dotenv-webpack插件，在webpack.config.js中配置环境变量加载，代码中同样用process.env访问：

<Wrapper apiKey={process.env.GOOGLE_MAPS_API_KEY} render={render}>
  <GoogleMap />
</Wrapper>

3. 若使用Vite（匹配Google官方示例） #

确保项目是Vite初始化的，在.env文件中配置带VITE_前缀的变量：

VITE_GOOGLE_MAPS_API_KEY=你的密钥内容

代码中保持官方示例写法即可：

<Wrapper apiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY!} render={render}>
  <GoogleMap />
</Wrapper>

若仍报错，检查Vite版本兼容性，或确认vite.config.js中已正确配置环境变量加载逻辑。

二、Google Maps API密钥的安全最佳实践 #

重要说明：只要在前端加载Google Maps，API密钥必然会出现在浏览器网络请求中，无法完全隐藏。 我们能做的是通过Google Cloud控制台限制密钥使用范围，避免被滥用：

• 设置应用限制：登录Google Cloud控制台，找到目标API密钥，在「应用限制」中选择「HTTP引用网站」，添加你的业务域名（如https://your-domain.com/*），仅允许该域名调用密钥
• 设置API限制：在「API限制」中仅勾选你实际需要的API（如Maps JavaScript API），禁止密钥用于未授权的API调用
• 启用计费提醒：设置预算阈值提醒，避免因滥用产生高额费用
• 后端代理敏感操作：继续保持Geocoding API通过后端代理调用的方式，不在前端直接发起此类请求，减少密钥暴露场景

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