我的express+react应用配置cors后仍报CORS跨域错误，是什么原因？

问题根因 #

你遇到的CORS报错核心是Express中间件和路由的注册顺序错误：
在app.ts的构造函数中，你先执行了initializeControllers注册接口路由，之后才执行initializeMiddleWares注册CORS中间件。Express会按照注册顺序处理请求，跨域请求（包括预检OPTIONS请求）直接匹配到了先注册的路由逻辑，没有经过CORS中间件处理，自然不会返回跨域所需的响应头，因此触发报错。

解决方法 #

第一步：调整初始化顺序 #

修改app.ts构造函数的执行逻辑，先注册中间件，再注册路由：

constructor(controllers: any[]) {
  this._app = express();
  dotenv.config();

  // 先初始化所有中间件（包含CORS处理）
  this.initializeMiddleWares();
  // 再注册控制器对应的路由
  this.initializeControllers(controllers);
}

修改完成后重启后端服务即可解决90%以上的同类问题。

可选优化（适配多环境/扩展场景） #

如果后续需要支持多域名跨域，可修改express.middleware.ts中的CORS配置，动态判断允许的来源：

app.use(
  cors({
    origin: (origin, callback) => {
      const allowedOrigins = ["http://localhost:3000", "你的线上正式域名"];
      // 允许没有origin的请求（比如postman本地调试）或者在白名单内的来源
      if (allowedOrigins.includes(origin) || !origin) {
        callback(null, true);
      } else {
        callback(new Error("Not allowed by CORS"));
      }
    },
    methods: ["POST", "PUT", "GET", "OPTIONS", "HEAD"],
    credentials: true,
  })
);

不需要额外手动处理OPTIONS请求，cors包会自动处理预检请求的响应头。

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