如何为部署在Heroku的PERN React-Native Expo应用配置Node.js请求

1. 修正服务器端口：别硬写4000 #

Heroku会为应用动态分配端口，硬编码4000会导致服务启动失败。改用环境变量读取端口，本地开发可 fallback 到4000：

// 替换原监听代码
const PORT = process.env.PORT || 4000;
server.listen(PORT, () => {
  console.log(`server listening on port ${PORT}`);
});

2. CORS配置：匹配环境，别加多余端口 #

• 若前端是Expo Web应用，CORS origin设为Heroku前端域名（如https://my-example-app.herokuapp.com）；若为Expo移动端（iOS/Android），可将origin设为true或*（需保留credentials: true）。
• 重点：Heroku域名后禁止加:4000，HTTPS默认走443端口，域名会自动映射到服务器动态端口。

修改server/index.js的CORS配置：

// 用环境变量区分生产/本地，避免反复改代码
const allowedOrigin = process.env.NODE_ENV === 'production' 
  ? "https://my-example-app.herokuapp.com" // 你的Heroku前端域名（Web用）
  : "http://127.0.0.1:3000";

const io = new Server(server, {
  cors: {
    origin: allowedOrigin,
    credentials: true,
  },
});

app.use(
  cors({
    origin: allowedOrigin,
    credentials: true,
  })
);

3. 前端Fetch请求：去掉端口号 #

Heroku域名已绑定正确服务端口，直接使用HTTPS地址即可：

// 用环境变量管理API地址，本地/生产切换更便捷
const API_BASE_URL = process.env.NODE_ENV === 'production'
  ? "https://my-example-app.herokuapp.com"
  : "http://127.0.0.1:4000";

fetch(`${API_BASE_URL}/auth/login`, {
  method: "POST",
  credentials: "include",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(vals),
})

4. 环境变量配置（推荐） #

登录Heroku控制台进入应用→Settings→Config Vars，添加：

• NODE_ENV=production：让代码自动切换生产环境逻辑
• 无需手动配置数据库地址，Heroku Postgres已自动生成DATABASE_URL环境变量，直接在代码中读取即可

最后检查项 #

• 执行heroku logs --tail查看服务器日志，排查启动或跨域报错
• 确保前端请求域名与后端CORS origin完全匹配（包含HTTPS前缀）
• 若部署Expo Web，需在package.json中添加脚本："scripts": { "build": "expo export:web" }，保证Heroku能正确构建前端

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