MERN应用Heroku部署后Firebase Auth提示API Key无效如何解决

你遇到的本地Firebase Auth正常、Heroku部署后报错的问题，常见原因及对应解决方法如下：

核心原因：React环境变量需在构建阶段注入 #

React的环境变量不会在应用运行时动态读取，只会在npm run build（也就是Heroku自动执行的构建步骤）时把值硬编码到打包后的静态文件中。如果你是在代码推送、构建完成后才配置的Heroku Config Vars，之前打包的产物里根本不会包含这些变量值，自然会报错。

• 解决方法：配置完所有Config Vars后重新触发构建，可选两种操作：
  • 终端执行git commit --allow-empty -m "强制重建以注入环境变量"后执行git push heroku main
  • 直接在Heroku控制台的部署页面选择对应分支手动触发部署

其他常见原因 #

1. 环境变量配置格式错误 #

• 检查变量名拼写是否完全和代码中调用的一致，React要求自定义环境变量必须以REACT_APP_开头，大小写敏感，不能出现拼写偏差
• 运行heroku config查看所有配置值，确认每个值没有多余的前后空格、没有多余的包裹引号，Heroku Config Vars不需要加引号，直接粘贴原始值即可
• 确认你的.env文件已经加入.gitignore，避免本地的占位符.env文件被推送到Heroku，覆盖平台配置的Config Vars

2. Firebase域名授权未配置 #

Firebase Auth默认会拦截未授权域名的请求，你只配置了本地开发的localhost域名，没有把Heroku应用域名添加到Firebase的授权域名列表中，也会触发API key无效的报错。

• 解决方法：打开Firebase控制台进入Authentication设置页面，在授权网域一栏添加你的Heroku应用域名即可

3. 变量注入验证 #

你可以在React的登录页面代码中临时添加一行console.log(process.env.REACT_APP_FIREBASE_API_KEY)，部署后打开浏览器控制台查看输出的值，确认和你配置的API key一致，即可确认变量是否正确注入。

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