Vercel部署Node.js Express API时CORS配置不生效该如何解决？

导致该问题的常见原因及修复方案如下：

核心原因 #

本地测试时请求链路短，CORS中间件可以正常处理所有请求，但部署到Vercel后，无服务环境的请求转发逻辑可能导致OPTIONS预检请求没有被你的Express服务正确处理，或是CORS中间件没有正常作用到预检请求上，最终返回的响应缺少CORS相关头。

修复步骤 #

1. 调整Express代码的中间件顺序，显式配置CORS规则并处理OPTIONS请求
   必须保证cors中间件挂载在所有路由定义之前，同时添加OPTIONS请求的兜底处理，避免预检请求被直接拦截：

import express from "express";
import cors from "cors";
const app = express();

// 放在所有路由、其他中间件的最前面
app.use(cors({
  origin: "*",
  methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
  allowedHeaders: ["Content-Type", "Authorization"]
}));

// 显式响应所有OPTIONS预检请求
app.options("*", (req, res) => {
  res.sendStatus(204);
});

// 后续再编写你的业务路由逻辑
// app.get('/', ...)

2. 修改vercel.json配置，在路由层补充CORS响应头
   在Vercel的路由配置中添加CORS相关头，双重保障所有响应都携带正确的CORS字段：

{
  "version": 2,
  "builds": [
    {
      "src": "./index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "./index.js",
      "headers": {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type, Authorization"
      }
    }
  ]
}

验证方式 #

部署更新后，可以直接用工具发送OPTIONS请求到你的API地址，检查响应头中是否存在Access-Control-Allow-Origin字段，确认配置生效即可。如果后续需要限制可访问的域名，将配置中的*替换为对应域名即可。

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