Vercel本地开发环境带负载POST请求的CORS问题排查

问题核心分析 #

你遇到的问题是：本地开发时，带Payload的POST请求触发预检OPTIONS请求失败，提示缺少Access-Control-Allow-Origin头，但部署到Vercel后正常；不带Payload的POST/GET请求无问题。关键线索是预检请求未进入你的CORS包装函数（console.log未触发），说明OPTIONS请求可能没被你的代码处理。

排查与解决步骤 #

1. 验证环境变量是否正确加载 #

虽然你提到其他函数能读取环境变量，但仍需确认ACCESS_CONTROL_ALLOW_ORIGIN在预检请求时是否有效：

• 临时将Access-Control-Allow-Origin硬编码为你的前端地址：

  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5173');
  

  测试是否还会出现CORS错误。如果硬编码后正常，说明环境变量在本地开发的OPTIONS请求中未正确加载，检查.env文件是否放在项目根目录，且vercel dev启动时是否读取了该文件（可在函数开头打印process.env.ACCESS_CONTROL_ALLOW_ORIGIN确认）。

2. 确认OPTIONS请求是否到达你的函数 #

修改CORS包装函数，添加更详细的日志，确认请求是否进入代码：

export const allowCors = (func) => {
    return (req, res) => {
        console.log(`[${new Date().toISOString()}] ${req.method} request - Origin: ${req.headers.origin}`);
        res.setHeader('Access-Control-Allow-Credentials', true);
        res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5173');
        res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT');
        res.setHeader(
            'Access-Control-Allow-Headers',
            'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
        );
        if (req.method === 'OPTIONS') {
            console.log('Handling OPTIONS preflight request');
            res.status(200).end();
            return;
        }
        return func(req, res);
    };
}

重启vercel dev后发送请求，查看终端是否有日志输出。如果没有日志，说明OPTIONS请求被本地服务器拦截，未到达你的Serverless函数。

3. 检查Vercel本地开发服务器的行为 #

vercel dev在本地处理Serverless函数时，可能存在默认的OPTIONS请求拦截机制：

• 尝试绕过Vercel本地服务器，用纯Node.js运行你的函数逻辑，验证CORS配置是否正确。比如创建一个简单的Express服务器来测试：

  import express from 'express';
  import { allowCors } from './src/util';
  
  const app = express();
  const port = 3000;
  
  const login = allowCors((req, res) => {
      res.status(200).json({ status: true });
  });
  
  app.post('/api/login', login);
  app.options('/api/login', login); // 手动绑定OPTIONS请求到处理函数
  
  app.listen(port, () => {
      console.log(`Server running on http://localhost:${port}`);
  });
  

  启动这个服务器后测试请求，如果正常，说明问题出在vercel dev的本地配置上。

4. 检查路由与请求路径 #

确认前端发送的请求路径是否正确对应到你的Serverless函数：

• 比如你的函数文件是api/login.js，则请求URL应为http://localhost:3000/api/login，确保路径没有拼写错误。
• 检查vercel.json中的路由规则，是否存在重写或重定向规则导致OPTIONS请求被分流。

5. 清除浏览器缓存 #

浏览器可能缓存了旧的CORS响应，尝试用无痕模式打开页面，或清除浏览器缓存后重新测试。

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