Vue前端+Nitro后端POST请求CORS预检响应未通过HTTP状态检查问题

问题分析 #

你的情况是GET请求正常，但POST请求触发的OPTIONS预检响应没有返回HTTP 200/204状态，导致浏览器拦截请求。原因在于Nitro的routeRules中设置cors: true时，可能没有正确处理OPTIONS预检请求的响应逻辑，加上手动配置CORS headers可能存在冲突，使得预检请求得不到合法的状态码。

解决方案 #

方案1：单独处理OPTIONS预检请求

在routeRules中为OPTIONS请求单独配置响应，确保返回204状态码：

// nitro.config.ts
export default defineNitroConfig({
  srcDir: "server",    
  routeRules:{
    // 为所有/api路由设置CORS headers
    '/api/**': { 
      headers: {
        'access-control-allow-methods': 'GET,POST,OPTIONS,PUT,DELETE',
        'access-control-allow-origin':'http://localhost:5173',
        'access-control-allow-headers':'Content-Type,Authorization' 
      } 
    },
    // 专门处理OPTIONS预检请求，返回204无内容状态
    '/api/**:OPTIONS': {
      headers: {
        'access-control-allow-methods': 'GET,POST,OPTIONS,PUT,DELETE',
        'access-control-allow-origin':'http://localhost:5173',
        'access-control-allow-headers':'Content-Type,Authorization' 
      },
      handler: () => new Response(null, { status: 204 })
    }
  }
});

方案2：使用Nitro内置CORS配置（推荐）

放弃在routeRules中手动配置CORS headers，改用Nitro官方提供的cors配置项，更规范且不易出错：

// nitro.config.ts
export default defineNitroConfig({
  srcDir: "server",
  // 直接配置CORS规则
  cors: {
    origin: "http://localhost:5173",
    methods: ["GET", "POST", "OPTIONS", "PUT", "DELETE"],
    allowedHeaders: ["Content-Type", "Authorization"],
    credentials: true // 如果前端需要携带Cookie，开启此项
  },
  // routeRules仅保留其他非CORS相关配置
  routeRules:{
    '/api/**': { /* 比如缓存、重定向等规则 */ }
  }
});

关键说明 #

• POST请求会触发浏览器发送OPTIONS预检请求，必须确保该请求返回200或204状态，否则浏览器会拦截后续的POST请求。
• 避免同时使用cors: true和手动设置access-control-* headers，二者混合可能导致header重复或逻辑冲突。
• 若前端请求携带了额外自定义headers，需确保allowedHeaders中包含对应的字段。

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