新笔记本本地Vercel项目POST请求CORS预检查失败求助

问题核心分析 #

错误提示明确指出预检OPTIONS请求未返回HTTP OK状态，这是导致CORS拦截的直接原因。你的Express测试服务器正常运行，说明前端代码逻辑无问题，问题集中在Vercel本地服务对OPTIONS请求的处理上，结合新旧电脑的差异，重点排查以下方向：

解决方案步骤 #

1. 排查ensureOptionsPreflight中间件的实现 #

你的Vercel后端依赖ensureOptionsPreflight处理OPTIONS请求，这个中间件可能在新环境下未正确返回200状态码：

• 打开../../src/middleware/optionsPreflightMiddleware.ts，确认是否包含完整的CORS头设置和200状态返回：

  export function ensureOptionsPreflight(req: VercelRequest, res: VercelResponse) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT');
    res.setHeader('Access-Control-Allow-Headers', '*');
    res.setHeader('Access-Control-Allow-Credentials', 'true');
    // 关键：必须返回200状态
    res.status(200).end();
  }
  

• 如果中间件遗漏res.status(200)或存在逻辑错误，会直接导致预检请求失败。

2. 临时替换OPTIONS处理逻辑（快速验证） #

若不确定中间件问题，可直接在dummy.ts中手动处理OPTIONS请求，排除中间件干扰：

import type { VercelRequest, VercelResponse } from '@vercel/node';
// 先注释中间件导入，手动处理OPTIONS
// import { ensureOptionsPreflight } from '../../src/middleware/optionsPreflightMiddleware';
const handler = async (req: VercelRequest, res: VercelResponse) => {
  console.log('req method', req.method);

  switch (req.method) {
    case 'OPTIONS': {
      console.log(req.method);
      // 手动配置CORS头并返回200
      res.setHeader('Access-Control-Allow-Origin', '*');
      res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT');
      res.setHeader('Access-Control-Allow-Headers', '*');
      res.setHeader('Access-Control-Allow-Credentials', 'true');
      return res.status(200).end();
    }
    case 'POST': {
      const newRes = req.body;
      console.log('newRes', req.body);
      res.status(200).json(newRes);
      break;
    }
    default: {
      console.log('method not defined');
      res.status(400).json({ status: 'invalid method' });
    }
  }
};
export default handler;

修改后重启Vercel本地服务，测试POST请求是否恢复正常。

3. 检查Vercel CLI版本差异 #

新电脑的Vercel CLI版本可能与旧电脑不一致，导致vercel.json的headers配置未正确加载：

• 在旧电脑执行vercel --version，新电脑执行相同命令对比版本号
• 若版本不同，尝试回退到旧版本：npm install -g vercel@<旧版本号>，或更新到最新版本：npm install -g vercel@latest
• 重启Vercel dev服务，确保配置生效

4. 排查系统防火墙/安全软件 #

新电脑的防火墙或第三方安全软件可能拦截了OPTIONS请求或修改了响应头：

• 临时关闭系统防火墙（如Windows Defender防火墙）或安全软件
• 测试POST请求，若恢复正常，添加Vercel服务端口（4002）和前端端口（5500）到防火墙例外列表

5. 修正Vercel配置格式 #

你的vercel.json存在引号转义问题，修正为标准JSON格式：

{
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        { "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" }
      ]
    }
  ]
}

修改后执行vercel dev重启服务，检查响应头是否包含配置的CORS字段。

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