ReactJS项目如何避免在GitHub中泄露API密钥？

1. 使用环境变量管理密钥 #

• 在项目根目录创建.env文件，按REACT_APP_API_KEY=你的实际密钥格式定义变量（React要求客户端环境变量必须以REACT_APP_为前缀）
• 代码中通过process.env.REACT_APP_API_KEY引用变量，替代硬编码的密钥
• 务必将.env添加到.gitignore文件中，确保这个文件不会被提交到GitHub
• 调整后的代码示例：

export const geoApiOptions = {
  method: "GET",
  headers: {
    "X-RapidAPI-Key": process.env.REACT_APP_API_KEY,
    "X-RapidAPI-Host": "wft-geo-db.p.rapidapi.com",
  },
};

export const GEO_API_URL = "https://wft-geo-db.p.rapidapi.com/v1/geo";

2. 区分客户端与服务端密钥 #

• 如果你的API密钥是用于服务端请求的，绝对不要放在前端代码里——哪怕用环境变量，打包后的前端代码依然会暴露密钥
• 可以搭建一个简单的后端代理（比如用Node.js/Express），前端请求自己的后端接口，由后端带上密钥去调用第三方API，密钥只在服务端环境中存储

3. 提交代码前做敏感检查 #

• 每次提交前用git diff查看代码变更，确认没有硬编码的密钥、密码等敏感内容
• 可以配置pre-commit钩子（比如借助husky工具），自动扫描代码中的敏感关键词（比如API_KEY、RapidAPI-Key），阻止包含敏感信息的提交

4. 已泄露密钥的应急处理 #

• 立刻前往对应的API平台（比如RapidAPI）撤销旧密钥，生成新的密钥，避免被恶意调用产生额外费用
• 如果密钥已经被提交到GitHub历史中，用git filter-repo工具彻底清除提交记录里的敏感内容（操作前一定要备份仓库）

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