本文详解在 heroku 部署 mern 应用并绑定 godaddy 自定义域名（如 www.sunshine.xyz）后，如何安全、准确地设置 origin 和 react_app_server 环境变量，确保前后端跨域通信正常，避免因域名变更导致的 cors 拒绝或请求失败。
本文详解在 heroku 部署 mern 应用并绑定 godaddy 自定义域名（如 www.sunshine.xyz）后，如何安全、准确地设置 origin 和 react_app_server 环境变量，确保前后端跨域通信正常，避免因域名变更导致的 cors 拒绝或请求失败。
当您将 React 前端与 Express 后端共同部署于 Heroku，并通过 GoDaddy 绑定自定义域名（例如 www.sunshine.xyz）后，常见的通信中断问题往往并非 DNS 或 SSL 配置错误，而是环境变量未随域名变更同步更新所致。核心在于两个关键变量的语义与作用域需严格匹配实际访问场景：
✅ 正确理解变量职责
- ORIGIN（后端使用）：用于 Express 的 cors() 中间件，控制哪些来源可发起带凭据（credentials: true）的跨域请求。它必须是精确匹配的完整协议+域名（如 https://www.sunshine.xyz），或设为 true（仅限开发/临时验证，生产环境严禁使用）。
- REACT_APP_SERVER（前端使用）：React 构建时注入的 API 基地址，所有 fetch() 请求均以此为前缀。它应指向后端服务的实际可访问地址，而非前端域名。
⚠️ 常见误区与正确配置
| 变量 | ❌ 错误示例 | ✅ 推荐配置（生产环境） | 说明 |
|---|---|---|---|
| ORIGIN | true, sunshine.xyz, http://www.sunshine.xyz | https://www.sunshine.xyz | 必须与用户浏览器访问前端的 URL 完全一致（含 https 和 www）。若同时支持 sunshine.xyz（无 www），需传入数组：["https://www.sunshine.xyz", "https://sunshine.xyz"]。 |
| REACT_APP_SERVER | https://www.sunshine.xyz, infinite-rat-vvdkv7ml30w78pt7a30aor61.herokudns.com | https://sunshine-website-43bdd7b1a0fd.herokuapp.com | 始终指向 Heroku 提供的原生应用 URL（即 your-app-name.herokuapp.com）。该地址是后端服务真实运行地址；herokudns.com 是内部解析别名，不可用于客户端直连；而 www.sunshine.xyz 是前端入口，若将其设为 REACT_APP_SERVER，则请求会发往 Nginx/静态托管层而非后端服务，必然 404。 |
? 实际配置命令（Heroku CLI）
# 设置 ORIGIN（支持多域名时用 JSON 数组格式） heroku config:set ORIGIN='["https://www.sunshine.xyz", "https://sunshine.xyz"]' -a sunshine-website # 设置 REACT_APP_SERVER（必须为 herokuapp.com 地址） heroku config:set REACT_APP_SERVER='https://sunshine-website-43bdd7b1a0fd.herokuapp.com' -a sunshine-website # 验证配置 heroku config -a sunshine-website
?️ 安全增强建议（生产必备）
- 禁用 ORIGIN=true：虽可临时通联，但等同于开放全部跨域请求，存在 CSRF 和数据泄露风险。
-
启用 HTTPS 强制重定向（后端）：
app.use((req, res, next) => { if (req.headers['x-forwarded-proto'] !== 'https') { return res.redirect(`https://${req.headers.host}${req.url}`); } next(); }); - 前端构建时注入变量：确保 REACT_APP_SERVER 在 create-react-app 构建阶段生效（需以 REACT_APP_ 开头），且不暴露敏感信息。
✅ 最终验证步骤
- 清除浏览器缓存，访问 https://www.sunshine.xyz；
- 打开开发者工具 → Network 标签页，检查 /profile 等 API 请求：
- 请求 URL 应为 https://sunshine-website-...herokuapp.com/profile；
- 响应 Header 中应包含 Access-Control-Allow-Origin: https://www.sunshine.xyz；
- 状态码为 200，无 CORS error 控制台报错。
完成上述配置后，您的 MERN 应用即可在 GoDaddy 自定义域名下稳定、安全地运行前后端通信——既符合现代 Web 安全规范，又规避了 Heroku 域名变更带来的典型陷阱。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
