本文详解在 Heroku 部署 MERN 应用并绑定 GoDaddy 自定义域名（如 www.sunshine.xyz）后，如何安全、准确地配置 ORIGIN（CORS）和 REACT_APP_SERVER（前端请求地址）两个关键环境变量，避免前后端通信失败。

本文详解在 heroku 部署 mern 应用并绑定 godaddy 自定义域名（如 `www.sunshine.xyz`）后，如何安全、准确地配置 `origin`（cors）和 `react_app_server`（前端请求地址）两个关键环境变量，避免前后端通信失败。

当您成功将自定义域名（例如 www.sunshine.xyz）解析至 Heroku 应用，并启用自动 SSL 后，前端可正常访问，但常出现“跨域被拒”或“API 请求 404/500”等问题——这通常并非 DNS 或证书问题，而是环境变量配置失当所致。核心在于理解两个变量的职责与作用域：

✅ ORIGIN（后端 CORS 配置）

该变量控制 Express 的 cors() 中间件允许哪些来源发起跨域请求。必须精确匹配前端实际访问的协议 + 域名 + 端口（若非标准端口）。

• ❌ 错误做法：设为 true（开放所有来源，存在严重安全风险）
• ✅ 正确做法：明确列出受信任的前端地址（支持数组）

  // server.js
  const cors = require('cors');
  const origin = process.env.ORIGIN?.split(',') || [];

app.use(cors({ credentials: true, origin: origin.length > 0 ? origin : false // false = 禁用 CORS（开发时慎用） }));

在 Heroku CLI 中设置（推荐使用 HTTPS 完整地址）：
```bash
heroku config:set ORIGIN="https://www.sunshine.xyz,https://sunshine.xyz" -a your-app-name

⚠️ 注意：若同时支持 www 和裸域名，务必两者都写入；Heroku 不会自动重定向 sunshine.xyz → www.sunshine.xyz，需在 GoDaddy 设置 301 重定向或后端统一处理。

✅ REACT_APP_SERVER（前端请求基地址）

这是 React 应用中 fetch() 调用的后端 API 根路径。它必须指向您的 Heroku 后端服务地址，而非前端域名。常见误区是将其设为 https://www.sunshine.xyz —— 这会导致前端向自己发送请求（即请求静态资源服务器），而非真正的 Node.js 后端。

PigX UI 前端开发

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

下载

立即学习“前端免费学习笔记（深入）”；

• ✅ 正确值：Heroku 提供的默认应用 URL（带 .herokuapp.com 后缀）

  https://your-app-name-12345.herokuapp.com

• ✅ 更佳实践：使用 Heroku DNS 目标（更稳定，不受应用重命名影响）

  https://infinite-rat-vvdkv7ml30w78pt7a30aor61.herokudns.com

  设置命令：

  heroku config:set REACT_APP_SERVER="https://your-app-name-12345.herokuapp.com" -a your-app-name

? 额外关键检查项

1. 前端构建时注入变量：确保 REACT_APP_SERVER 在 create-react-app 中以 REACT_APP_ 前缀声明，且在 npm run build 时已固化到静态文件中（运行时不可变）。
2. 后端路由兜底：若使用 create-react-app + Express，务必添加 SPA 路由兜底，避免刷新 https://www.sunshine.xyz/some-route 时返回 404：

   // server.js（放在所有路由之后、app.listen() 之前）
   if (process.env.NODE_ENV === 'production') {
     app.use(express.static(path.join(__dirname, 'frontend', 'build')));
     app.get('*', (req, res) => {
       res.sendFile(path.join(__dirname, 'frontend', 'build', 'index.html'));
     });
   }

3. HTTPS 强制与 Cookie 安全：若启用 credentials: true，后端响应头需含 Access-Control-Allow-Origin（不能为 *），且 Cookie 必须标记为 Secure + SameSite=None：

   app.use(session({
     secret: 'your-secret',
     resave: false,
     saveUninitialized: false,
     cookie: { 
       secure: true,      // 仅 HTTPS 传输
       httpOnly: true,
       sameSite: 'none'   // 允许跨站携带 Cookie
     }
   }));

? 总结

变量	推荐值	说明
ORIGIN	"https://www.sunshine.xyz,https://sunshine.xyz"	精确白名单，禁用 true
REACT_APP_SERVER	"https://your-app-name-12345.herokuapp.com"	指向后端服务，非前端域名

配置完成后，执行 git commit -m "update env vars" → git push heroku main 重新部署。可通过浏览器开发者工具 Network 面板验证：

• 前端请求是否发往 your-app-name-12345.herokuapp.com（而非 www.sunshine.xyz）
• 后端响应头是否含 Access-Control-Allow-Origin: https://www.sunshine.xyz

至此，您的 MERN 应用即可在 GoDaddy 自定义域名下安全、稳定运行。