如何为预检请求手动添加Access-Control-Allow响应头？

你的allowCORS中间件仅挂载在GET /路由上，但OPTIONS预检请求不会匹配该GET路由，导致中间件完全没被触发，自然不会设置所需的CORS响应头。Express默认会自动处理OPTIONS请求并返回200状态，但不会添加自定义的CORS头。

方案1：全局挂载中间件（推荐） #

将allowCORS通过app.use()全局注册，让所有请求（包括OPTIONS预检请求）都经过该中间件处理：

// 务必在所有路由定义之前挂载中间件
app.use(allowCORS);

// 定义业务路由
app.get("/", (req: Request, res: Response) => {
  res.send({response: "My root route"});
});

方案2：单独处理所有OPTIONS请求 #

如果不想全局挂载，可以专门为所有路径的OPTIONS请求绑定中间件：

// 匹配所有路径的OPTIONS请求
app.options('*', allowCORS);

// 原有业务路由
app.get("/", allowCORS, (req: Request, res: Response) => {
  res.send({response: "My root route"});
});

按照CORS标准，预检请求建议返回204 No Content状态码，你可以修改中间件的OPTIONS处理逻辑，和官方cors库行为保持一致：

const allowCORS = (req: Request, res: Response, next: NextFunction): void => {
  const origin = req.get('origin');
  console.log('origin in allowCORS', origin);
  res.setHeader("Access-Control-Allow-Origin", origin || '*');
  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");

  if (req.method === 'OPTIONS') {
    // 返回204 No Content更符合CORS规范
    res.status(204).send();
  } else {
    next();
  }
};

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