Vercel Express预请求500错误及自定义Header未发送问题求助

环境说明 #

• 数据库：Supabase
• 后端：Vercel托管的Express无服务器函数（本地地址：http://localhost:3000/api/）
• 前端：Netlify托管的Vite+React应用（本地地址：http://localhost:5173）

问题描述 #

前端发起请求时触发500错误，提示「CORS Preflight Did Not Succeed」。已尝试Vercel官方文档配置CORS Header、cors中间件及手动添加Header，但自定义Header始终未生效。

现有配置代码 #

vercel.json #

{
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
        { "key": "Access-Control-Allow-Origin", "value": "http://localhost:5173" },
        { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,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" }
      ]
    }
  ]
}

Express应用初始化函数（createApp） #

import express, { NextFunction, Request, Response, json } from "express"
import helmet from "helmet"
import cors from "cors"
import cookieParser from "cookie-parser"

export function createApp() {
    const app = express()
    app.use(customCorsMiddleware)
    app.use(cookieParser())
    app.use(helmet())
    app.use(json())
    const url = process.env.CORS_URL
    const middle = cors({ origin: true, credentials: true,}) 
    app.use(middle)
    return app
}

修复方案 #

1. 清理重复的CORS配置 #

同时使用vercel.json的Header配置和Express的cors中间件会导致冲突，优先保留Express中间件（更灵活）：

• 删除vercel.json中的CORS相关Header配置
• 调整中间件加载顺序，确保cors中间件最先执行，并明确配置允许的源和Header：

import express, { NextFunction, Request, Response, json } from "express"
import helmet from "helmet"
import cors from "cors"
import cookieParser from "cookie-parser"

export function createApp() {
    const app = express()
    // 明确配置CORS参数
    const corsOptions = {
        origin: process.env.CORS_URL || "http://localhost:5173",
        credentials: true,
        allowedHeaders: ["X-CSRF-Token", "X-Requested-With", "Accept", "Accept-Version", "Content-Length", "Content-MD5", "Content-Type", "Date", "X-Api-Version"],
        methods: ["GET", "OPTIONS", "PATCH", "DELETE", "POST", "PUT"]
    }
    // 先加载cors中间件
    app.use(cors(corsOptions))
    // 手动响应OPTIONS预请求
    app.options("*", cors(corsOptions))
    
    app.use(cookieParser())
    app.use(helmet())
    app.use(json())
    // 注释或移除customCorsMiddleware（避免重复配置）
    // app.use(customCorsMiddleware)
    return app
}

2. 检查自定义CORS中间件 #

如果customCorsMiddleware是自定义实现，可能会覆盖cors中间件的Header。暂时注释该中间件测试，若问题解决，需调整其逻辑确保不干扰CORS Header的设置。

3. 确认Vercel本地启动方式 #

Vercel的vercel.json配置仅在通过vercel dev启动后端时生效。如果直接用node/nodemon启动Express，vercel.json的Header不会被加载，需完全依赖Express的cors中间件。

4. 验证环境变量 #

确保process.env.CORS_URL已正确设置为http://localhost:5173。可临时硬编码该值测试，确认环境变量是否正常加载。

5. 排除Helmet的干扰 #

Helmet的默认安全策略可能与CORS冲突，可暂时注释app.use(helmet())测试。若确认是Helmet的问题，可调整其配置：

app.use(helmet({
    crossOriginResourcePolicy: false,
    crossOriginEmbedderPolicy: false
}))

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