如何同时使用express.json()与res.setHeader并解决响应头已发送报错

错误原因 #

你碰到的Cannot set headers after they are sent to the client错误，是因为CORS中间件里的res.sendStatus(200)已经发送了完整响应，之后调用next()让请求继续走到POST路由，POST路由又执行res.end()，导致重复发送响应头，触发了Express的错误机制。

修复后的代码 #

const express = require("express");

const app = express();
const port = 8080;

// 先解析JSON请求体，确保后续路由能拿到req.body
app.use(express.json());

// CORS跨域配置：只设置响应头，不主动发送响应
app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  
  // 处理浏览器的OPTIONS预检请求（跨域POST前会自动发送）
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  
  // 让请求继续流转到后续路由
  next();
});

// POST路由：正常获取请求体并处理
app.post('/', function (req, res) {
  console.log(req.body.name);
  // 返回响应给客户端，避免请求挂起
  res.send({ success: true, message: "请求已接收" });
});

app.listen(port, () => console.log(`Listening on port ${port}`));

关键修改说明 #

• 删掉CORS中间件里的res.sendStatus(200)，只保留跨域头设置和next()，保证请求能到达POST路由
• 新增OPTIONS请求处理：浏览器发起跨域POST前会先发送OPTIONS预检请求，需要单独返回200状态码结束这个请求
• POST路由用res.send()替代res.end()，明确返回响应内容，避免客户端请求长时间挂起

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