仅生产环境登录报错：Netlify托管React前端仍请求localhost被拦截

• 当前线上站点请求指向http://localhost:8080的本质原因：React项目在Netlify执行生产构建时，没有读取到REACT_APP_API_BASE_URL环境变量，直接触发了config.js中的兜底硬编码逻辑，把本地开发用的地址打包进了线上前端代码
• 控制台报net::ERR_BLOCKED_BY_CLIENT是附加现象：公网运行的站点发起指向本地私有地址的请求时，会被浏览器的广告拦截插件、内置安全策略直接阻断，根源还是接口地址配置错误

1. 获取Heroku后端的正式API地址 #

• 打开Heroku后台对应后端项目的管理页，复制项目的公开访问域名，通用格式为https://<你的项目名称>.herokuapp.com
• 注意：你的config.js中已经为API路径预留了/api后缀，因此环境变量的最终取值不要重复拼接路径，正确格式为https://<你的项目名称>.herokuapp.com/api

2. 在Netlify配置生产环境构建变量 #

• 进入Netlify对应前端项目的管理面板，依次打开「Site settings」-「Build & deploy」-「Environment」配置栏目
• 新增一条环境变量配置：
  • 键名严格填写REACT_APP_API_BASE_URL（必须带REACT_APP_前缀，否则React构建时不会自动注入该变量）
  • 值填写上一步拿到的完整Heroku API地址
• 保存配置后，手动触发一次Netlify重新部署（在「Deploys」栏点击「Trigger deploy」即可）

特别提醒：React的环境变量是构建阶段静态注入的，配置完变量后如果不重新部署，线上代码还是旧的硬编码localhost地址，不会自动更新

3. 验证配置生效 #

• 等Netlify重新部署完成后，打开线上站点的控制台，触发一次登录请求
• 检查请求的目标地址是否已经替换为你的Heroku后端域名，确认不再出现localhost的请求地址即可

• 不要将JWT_SECRET配置在前端代码中：前端资源是完全公开可查看的，把JWT密钥写在前端会造成严重的身份验证安全漏洞，这个值应该仅配置在Heroku后端的环境变量中
• 不要直接修改本地config.js的兜底硬编码值提交到仓库：这种操作会导致本地开发、生产环境的配置逻辑混乱，正确的兜底值保留本地localhost地址即可，生产地址完全通过环境变量注入
• 如果配置完地址后出现CORS跨域报错，需要回到Express后端项目，将Netlify上的前端站点域名加入跨域允许的白名单

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