Vercel+Express中DELETE请求的CORS问题求助

问题情况 #

用Vercel和Express.js搭建API，GET、POST端点运行正常，但DELETE端点在Angular客户端（通过Angular HttpClient发起请求）触发CORS错误：

Access to XMLHttpRequest at 'http://localhost:3000/clients/27' from origin 'http://localhost:1420' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

已尝试的操作 #

• 使用cors()中间件，无效果
• 采用某方案后，用node index.js启动API时问题解决，但切换到vercel dev启动后，DELETE端点的CORS问题再次出现
• 调整vercel.json的路由headers配置，未产生变化

当前vercel.json内容：

{
  "version": 2,
  "buildCommand": "npx prisma generate && npx prisma db push",
  "builds": [
    {
      "src": "index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "index.js",
      "methods": ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"],
      "headers": {
        "Access-Control-Allow-Origin": "*"
      }
    }
  ]
}

解决方案 #

1. 在Express中显式处理OPTIONS预请求 #

Vercel的Node运行时可能不会自动处理OPTIONS预请求，需要在Express的所有路由之前添加全局处理逻辑：

// 放在所有路由定义之前
app.options('*', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.sendStatus(200);
});

这样能确保预请求直接返回200状态，通过CORS检查。

2. 调整vercel.json的路由配置 #

将OPTIONS请求单独配置，让Vercel直接返回200，不需要转发到Express：

{
  "version": 2,
  "buildCommand": "npx prisma generate && npx prisma db push",
  "builds": [
    {
      "src": "index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    // 先处理OPTIONS请求，直接返回200
    {
      "src": "/(.*)",
      "methods": ["OPTIONS"],
      "headers": {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type, Authorization"
      },
      "status": 200
    },
    // 处理其他请求
    {
      "src": "/(.*)",
      "dest": "index.js",
      "methods": ["GET", "POST", "PUT", "DELETE", "PATCH"],
      "headers": {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type, Authorization"
      }
    }
  ]
}

路由匹配是从上到下的，所以把OPTIONS路由放在前面优先处理。

3. 重启vercel dev服务 #

修改配置后，停止当前vercel dev进程，重新启动，确保新配置生效。

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