如何为同端口Express+WebSocket服务器配置CORS？

问题分析 #

Postman请求正常但前端跨域，核心原因是浏览器会严格校验CORS响应头，而Postman不受浏览器跨域规则限制。你当前的app.use(cors())默认配置没有覆盖前端请求的所有场景，比如预请求（OPTIONS）、带自定义头或凭证的请求，导致浏览器校验失败。

解决方案 #

1. 显式配置CORS参数

替换默认的cors()为精准配置，确保覆盖所有HTTP请求场景：

app.use(cors({
  origin: "http://localhost:5173", // 精准指定前端地址，比*更安全且适配凭证场景
  credentials: true, // 前端请求携带cookie/认证信息时必须开启
  allowedHeaders: ["Content-Type", "Authorization"], // 允许的自定义请求头
  methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"] // 明确支持所有HTTP方法，包括预请求OPTIONS
}));

2. 确保CORS中间件优先级

你的代码已经将CORS中间件放在路由之前，这是正确的，但要注意后续路由或中间件不要手动设置Access-Control-Allow-Origin等CORS相关响应头，避免配置冲突。

3. 验证预请求响应

在浏览器控制台的网络面板查看OPTIONS预请求的响应头，确认是否包含Access-Control-Allow-Origin: http://localhost:5173、Access-Control-Allow-Credentials: true等正确字段。

修改后的完整代码 #

const cors = require("cors");
const express = require("express");
const { createServer } = require("http");
const userRoutes = require("./Users/routes");
const itemRoutes = require("./Items/routes");

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

// 显式配置CORS
app.use(cors({
  origin: "http://localhost:5173",
  credentials: true,
  allowedHeaders: ["Content-Type", "Authorization"],
  methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"]
}));

app.use(express.json());
app.use("/api/v1/users", userRoutes);
app.use("/api/v1/items", itemRoutes);

const httpServer = createServer(app);

httpServer.listen(port, () => {
  console.log(`App listening on port http://localhost:${port}`);
});

const io = require("socket.io")(httpServer, {
  cors: {
    origin: ["http://localhost:5173"],
  },
});

io.on("connection", (socket) => {
  console.log("a user connected");

  socket.on("disconnect", () => {
    console.log("user disconnected");
  });
});

额外排查点 #

• 若前端请求设置了withCredentials: true，后端必须开启credentials: true，且origin不能用*。
• 检查路由文件中是否存在手动设置res.setHeader("Access-Control-Allow-Origin", ...)的代码，这类代码会覆盖cors中间件的配置。

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