NextJS使用Axios请求时出现CORS响应头缺失问题

• 第三方CORS检测工具能拿到正常CORS头，说明NestJS的CORS配置本身语法没有问题，浏览器预检请求缺失CORS头的核心原因是：OPTIONS预检请求根本没有走到NestJS的CORS处理逻辑，被其他逻辑提前拦截返回了响应。
• 最常见的触发场景：
  • 全局身份验证守卫、全局拦截器没有放行OPTIONS请求，直接给预检请求返回401/403错误，这类错误响应不会自动携带CORS头
  • 服务启动时环境变量加载顺序问题，process.env.FRONTEND_URL读取失败，实际运行时origin配置为undefined，和你做检测时的运行状态不一致
  • 服务外层的反向代理（Nginx）、CDN、WAF规则拦截了OPTIONS请求，直接返回响应没有透传给NestJS服务
  • 配置了全局路由前缀但CORS配置没有覆盖对应路径，OPTIONS请求直接返回404
  • Axios请求时自动加了后端CORS配置未允许的自定义请求头，导致预检直接被拒绝

按排查优先级依次操作：

1. 优先注册全局中间件放行所有OPTIONS请求
   在NestJS的main.ts入口文件中，把下面的中间件写在所有配置、中间件、守卫注册的最前面，保证最先执行：

   // 最先注册
   app.use((req, res, next) => {
     if (req.method === 'OPTIONS') {
       return res.sendStatus(200);
     }
     next();
   });
   

2. 补全CORS配置，校验环境变量
   启动服务时先打印process.env.FRONTEND_URL，确认值和前端实际访问域名完全匹配（注意协议、端口一致，不要带末尾斜杠），同时显式声明允许的方法和请求头，避免默认配置漏匹配：

   app.enableCors({
     credentials: true,
     origin: process.env.FRONTEND_URL,
     allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'X-CSRF-Token'],
     methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'],
     preflightContinue: false,
     optionsSuccessStatus: 204
   });
   

3. 调整全局守卫逻辑
   如果你用了JWT认证、权限校验类的全局守卫，在守卫的canActivate方法最前面加判断，直接放行OPTIONS请求，不要做token校验：

   const request = context.switchToHttp().getRequest();
   if (request.method === 'OPTIONS') {
     return true;
   }
   // 后续原有校验逻辑
   

4. 排查部署层规则
   如果服务前挂了Nginx、CDN、WAF，检查对应规则是否拦截了OPTIONS请求，确保所有OPTIONS请求都正常透传到NestJS服务处理，不要在代理层直接返回自定义响应。
5. 前端Axios配置校验
   确认process.env.BACKENDURL是后端服务的完整地址，不要写错协议、域名、端口，请求时不要携带未在后端CORSallowedHeaders中声明的自定义请求头。

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