本地React调用Heroku部署的Node/Express服务POST请求异常求助

核心问题解析 #

浏览器发起跨域非简单请求（比如POST、PUT）时，会先发送OPTIONS预检请求，确认服务器允许该跨域操作。你的服务器返回204（无内容）但未收到后续POST，大概率是CORS配置不完整导致浏览器拦截了实际请求。

具体排查与修复步骤 #

1. 完善Express的CORS中间件配置 #

如果你用了cors包，必须确保配置覆盖必要参数：

const cors = require('cors');
// 全局挂载CORS，放在所有路由之前
app.use(cors({
  origin: 'http://localhost:3000', // 明确指定本地React的源，不能用*（带凭证时会失效）
  methods: ['GET', 'POST', 'OPTIONS', 'PUT', 'DELETE'], // 包含OPTIONS和需要的请求方法
  allowedHeaders: ['Content-Type', 'Authorization'], // 允许客户端发送的自定义头
  credentials: true // 如果请求带cookie/token凭证，必须设为true
}));

注意：如果请求不带凭证，origin可以用*，但带凭证时必须指定明确域名，否则浏览器会拒绝响应。

2. 手动处理OPTIONS请求（未用cors包时） #

如果是手动配置CORS，要确保OPTIONS请求返回完整的允许头：

// 对所有路由的OPTIONS请求做处理
app.options('*', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.sendStatus(200); // 必须返回状态码让浏览器确认
});

3. 检查React端请求配置 #

确认客户端请求没有遗漏关键配置：

• 带凭证的请求要开启withCredentials（以Axios为例）：

axios.post('https://your-heroku-domain/login', loginData, {
  withCredentials: true
});

• 确认请求的Content-Type和服务器预期一致，比如发送JSON要设置Content-Type: application/json（Axios默认会处理，但手动fetch时要注意）。

4. 确认Express中间件顺序 #

CORS中间件必须先于所有路由挂载，否则OPTIONS请求会先到达路由，未经过CORS处理就被返回，导致浏览器拦截后续POST：

// 正确顺序：先CORS，再路由
app.use(cors(...));
app.use('/api', yourRouter);

5. 排查客户端请求是否实际发送 #

如果OPTIONS返回204但服务器没收到POST，可能是客户端代码出错：

• 在React端添加错误捕获，查看具体报错：

try {
  const response = await axios.post('/login', formData);
} catch (error) {
  console.error('请求失败：', error.response?.data || error.message);
}

• 打开浏览器开发者工具的Network面板，查看POST请求是否存在，状态码和响应内容是什么。

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