如何解决Express服务器的CORS 'Access-Control-Allow-Origin'错误？

问题排查与修复步骤 #

1. 移除客户端请求中的无效头 #

Access-Control-Allow-Origin是服务器返回给客户端的响应头，客户端请求中添加这个字段完全无效，反而可能干扰预检流程，直接删除：

const response = await fetch("http://localhost:4000/users/sign-up", { 
  method: "POST", 
  headers: { 
    "Accept": "application/json", 
    "Content-Type": "application/json" 
  }, 
  body: JSON.stringify(signUpData) 
});

2. 调整服务器初始化顺序 #

确保CORS中间件在所有异步操作前加载，避免数据库连接阻塞导致中间件未生效：

import express, { Application } from 'express';
import * as dotenv from 'dotenv';
import { databaseConnect, serverConnect } from './modules/connections';
import bodyParser from 'body-parser';
import cors from 'cors';
import devicesRouter from './routes/dashboard';
import usersRouter from './routes/users';
import announcementsRouter from './routes/announcements';
import ordersRouter from './routes/orders';

dotenv.config();
const app: Application = express();

// 先加载CORS中间件
app.use(cors({ origin: "http://localhost:3000", credentials: true }));
app.use(express.json());
app.use(bodyParser.json());

// 再执行异步数据库连接
await databaseConnect();

// 挂载路由
app.use('/devices', devicesRouter);
app.use('/users', usersRouter);
app.use('/announcements', announcementsRouter);
app.use('/orders', ordersRouter);

serverConnect();

3. 验证预检请求响应 #

用curl手动发送OPTIONS预检请求，确认CORS头是否正常返回：

curl -X OPTIONS http://localhost:4000/users/sign-up -H "Origin: http://localhost:3000" -H "Access-Control-Request-Method: POST"

检查响应头中是否包含Access-Control-Allow-Origin: http://localhost:3000和Access-Control-Allow-Methods: POST，如果没有，说明CORS中间件未正确生效。

4. 检查路由内的头覆盖问题 #

查看usersRouter的代码，确认没有手动设置Access-Control-Allow-Origin等CORS相关头，避免覆盖中间件的配置。

5. 临时放宽配置测试（仅调试用） #

将CORS的origin设为*，验证是否能正常请求：

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

如果此配置生效，说明之前的origin与客户端实际地址不匹配（比如客户端用127.0.0.1:3000而非localhost:3000），需严格对齐浏览器地址栏的地址。

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