部署在Vercel的Express后端出现CORS问题求助

问题背景 #

• Express后端本地运行无CORS问题，部署到Vercel后前端出现TypeError: Failed to fetch跨域错误
• 已在app.js中配置cors中间件：

var cors = require("cors");
app.use(cors());

• 通过ThunderClient验证响应头已包含Access-Control-Allow-Origin: *，但前端仍报错
• 尝试过两种vercel.json配置方案（如下），均未解决问题

方案一 #

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

方案二 #

{
  "version": 2,
  "builds": [
    {
      "src": "app.js",
      "use": "@vercel/node"
    }
  ],
  "rewrites": [{ "source": "/(.*)", "destination": "app.js" }],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        {
          "key": "Access-Control-Allow-Methods",
          "value": "GET,DELETE,PATCH,POST,PUT"
        },
        {
          "key": "Access-Control-Allow-Headers",
          "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
        }
      ]
    },
    {
      "source": "/vercel_app_domain_name/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        {
          "key": "Access-Control-Allow-Methods",
          "value": "GET,DELETE,PATCH,POST,PUT"
        },
        {
          "key": "Access-Control-Allow-Headers",
          "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
        }
      ]
    }
  ]
}

解决步骤 #

1. 移除Vercel配置中的CORS头设置
   同时在Express和Vercel配置中设置CORS头容易导致冲突，建议只保留Express的cors中间件处理。简化后的vercel.json如下：

{
  "version": 2,
  "builds": [
    {
      "src": "app.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "app.js",
      "methods": ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"]
    }
  ]
}

2. 显式配置cors中间件参数
   避免使用默认配置，明确指定允许的来源、方法和头，确保覆盖所有场景：

const cors = require('cors');
app.use(cors({
  origin: '*',
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With']
}));

3. 单独处理OPTIONS预检请求
   确保Express能正确响应浏览器的OPTIONS预检请求，添加以下代码：

app.options('*', cors()); // 对所有路由处理OPTIONS请求

4. 检查Vercel部署日志
   登录Vercel控制台查看部署日志，确认Express应用是否正常启动，是否有错误导致cors中间件未加载。

5. 验证部署后的响应头
   部署完成后，用浏览器开发者工具的Network面板查看请求响应头，确认Access-Control-Allow-Origin等CORS头是否正确返回，且没有重复或冲突的头信息。

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