Heroku部署React应用时config-vars配置的API密钥读取失败

核心错误点 #

1. 环境变量键名不匹配
   你在Heroku Config Vars中配置的键名为api_key，但代码中读取的是process.env.bitquery_key，二者名称完全不一致，无法读到对应值。
2. 客户端React环境变量注入规则不满足
   如果你是用Create React App搭建的、运行在浏览器端的React应用，框架出于安全考虑，默认只会将以REACT_APP_开头的自定义环境变量注入到客户端打包产物中，不带该前缀的变量仅在Node.js构建/服务端运行时可访问，前端代码中直接读取会返回undefined。
3. 认知误区：前端环境变量无法隐藏API密钥
   所有运行在浏览器端的React代码最终都会打包为静态JS文件发送到用户侧，哪怕通过环境变量注入，用户只要打开浏览器开发者工具查看源码、抓包网络请求，就能直接拿到明文API密钥，不存在隐藏效果。如果密钥涉及付费、有调用配额限制，必须通过自建后端代理转发请求，密钥仅存放在服务端。

修复操作步骤 #

• 对齐环境变量命名：
  若为客户端CRA应用，到Heroku Config Vars页面把原有配置的键名修改为REACT_APP_API_KEY；若为服务端Node层读取变量，确保代码中读取的键名和Heroku中配置的键名完全一致，不要出现拼写偏差。
• 修改前端代码中的变量读取逻辑，对应调整为匹配的变量名：

// 客户端CRA场景下的读取写法，和Heroku中配置的键名完全对应
let api_key = process.env.REACT_APP_API_KEY

• 重新触发Heroku部署：Config Vars的修改不会在已运行的应用实例上热生效，必须重新走一次构建部署流程，新的环境变量才会被注入到运行环境中。
• 安全整改（必做）：新增一层轻量后端接口部署在Heroku上，由后端读取服务端环境变量中的密钥（服务端读环境变量无需REACT_APP_前缀，键名匹配即可）发起第三方API请求，前端仅调用自有后端接口，从根源避免密钥泄露。

验证方法 #

部署完成后，临时添加console.log(api_key)打印，打开浏览器控制台确认能输出正确的密钥值，再检查接口请求头中X-API-KEY字段值是否正确，验证完成后删除临时打印代码即可。

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