Heroku部署TypeScript应用与API遇CORS失败及NS_ERROR_DOM_BAD_URI问题

核心问题定位与解决步骤 #

1. API端口配置修正 #

Heroku会动态分配端口，禁止硬编码端口号（比如本地的3002），必须通过process.env.PORT获取端口：

// Express启动代码示例
const port = process.env.PORT || 3002; // 本地 fallback 3002，线上用Heroku分配的端口
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

你看到的54400是Heroku动态分配的正常端口，无需手动干预，只要代码正确读取process.env.PORT即可。

2. CORS配置修复 #

CORS失败通常是因为配置未匹配前端域名或未开启认证凭证支持：

• 不要用通配符*作为origin（如果请求带认证头/cookie），需指定前端的Heroku完整域名（比如https://your-frontend-app.herokuapp.com）
• 开启credentials: true以支持跨域认证

// Express CORS配置示例
import cors from 'cors';

const corsOptions = {
  origin: process.env.FRONTEND_URL, // 从Heroku Config Vars中配置该变量
  credentials: true,
  allowedHeaders: ['Content-Type', 'Authorization']
};
app.use(cors(corsOptions));

同时确认前端fetch请求中设置了credentials: 'include'：

// useAuthApi.js中的fetch示例
fetch(`${process.env.REACT_APP_API_URL}/login`, {
  method: 'POST',
  credentials: 'include', // 必须添加以携带认证凭证
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(loginData)
});

3. NS_ERROR_DOM_BAD_URI 错误处理 #

该错误是请求URL格式非法导致，检查以下几点：

• 前端环境变量中的API URL是否完整（必须带https://，比如https://your-api-app.herokuapp.com，不要加端口号）
• URL中无空格、特殊字符或拼写错误（比如把https写成http）
• 确认Heroku Config Vars中的变量已正确部署（可通过heroku config -a your-app查看）

4. PostgreSQL数据库连接修复 #

不要完全注释SSL配置，Heroku PostgreSQL要求SSL连接，正确配置应为：

import { Pool } from 'pg';

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: {
    rejectUnauthorized: false // 适配Heroku自签名证书
  }
});

若数据库连接失败，API会无响应，也会间接导致前端请求异常。

5. 日志排查关键操作 #

• 查看API应用日志：heroku logs --tail -a your-api-app，检查是否有启动错误、数据库连接失败或路由报错
• 用curl/Postman直接测试API登录接口，确认API本身是否能正常返回数据：

curl -X POST https://your-api-app.herokuapp.com/login -H "Content-Type: application/json" -d '{"username":"test","password":"test"}'

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