部署全栈项目至Vercel遇HTTP CORS错误，如何排查修复？

问题根源 #

1. 路由配置完全错误：你当前把所有请求（包括后端接口）都转发到了前端的client/src/index.js，导致后端接口根本没被执行，OPTIONS预检请求自然拿不到200/204的合法响应。
2. OPTIONS请求未被正确处理：前端发起的预检请求需要服务器返回明确的200或204状态码，而前端入口文件无法处理这类请求，直接返回了非OK状态。

修复步骤 #

1. 调整vercel.json配置，区分前端静态资源与后端接口 #

假设你的后端接口都以/api开头，前端页面是其他路径，修改配置如下：

{
  "version": 2,
  "builds": [
    // 后端Node服务构建配置
    {
      "src": "./index.js",
      "use": "@vercel/node"
    },
    // 前端静态资源构建配置（根据框架调整打包目录）
    {
      "src": "./client/package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "./client/build" // React框架用build，Vue用dist，按需修改
      }
    }
  ],
  "routes": [
    // 优先处理后端接口请求
    {
      "src": "/api/(.*)",
      "dest": "/index.js",
      "methods": ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"],
      "headers": {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type, Authorization"
      }
    },
    // 处理前端静态资源请求
    {
      "src": "/(.*)",
      "dest": "/client/build/$1" // 对应上面的distDir路径
    },
    // 单独处理OPTIONS预检请求，直接返回200状态
    {
      "src": "/(.*)",
      "methods": ["OPTIONS"],
      "status": 200,
      "headers": {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type, Authorization"
      }
    }
  ]
}

2. 前端请求路径调整 #

确保前端发起的接口请求是/api/xxx格式，这样才能被正确转发到后端服务。

3. 生产环境优化建议 #

不要用*作为Access-Control-Allow-Origin，建议替换成你的前端域名，比如https://your-frontend.vercel.app，提升安全性。

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