本文详解在 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 配置错误，而是环境变量未随域名变更同步更新所致。核心在于两个关键变量的语义与作用域需严格匹配实际访问场景：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

✅ 正确理解变量职责

• 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_ 开头），且不暴露敏感信息。

✅ 最终验证步骤

1. 清除浏览器缓存，访问 https://www.sunshine.xyz；
2. 打开开发者工具 → 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 域名变更带来的典型陷阱。