Express JS API部署AWS/Vercel遇CORS问题：React视频上传失败

核心排查方向：预检请求与大文件上传的特殊处理 #

视频上传属于非简单请求（要么Content-Type不属于application/x-www-form-urlencoded/multipart/form-data/text/plain，要么携带自定义请求头），浏览器会先发送OPTIONS预检请求确认跨域权限。如果服务器或平台未正确响应这个请求，就会触发「No 'Access-Control-Allow-Origin'」错误。

1. 修正Express的CORS配置，确保处理预检请求 #

即使你已使用cors中间件，部分平台可能会拦截OPTIONS请求，或者配置存在遗漏。调整配置如下：

const cors = require('cors');

// 针对视频上传的针对性配置
app.use(cors({
  origin: process.env.ALLOWED_ORIGINS || 'https://你的前端域名.com', // 替换为实际前端地址
  methods: ['GET', 'POST', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'], // 上传视频可能用到的请求头
  credentials: true, // 如果前端携带cookie或认证信息
  preflightContinue: false, // 让cors中间件直接处理OPTIONS，不传递给后续路由
  optionsSuccessStatus: 200
}));

// 手动兜底处理所有OPTIONS请求，防止平台拦截
app.options('*', cors());

2. 适配平台的特殊限制 #

Vercel部署注意事项

• Vercel的Serverless Functions默认有请求大小限制（免费版约4.5MB），视频超过阈值会被截断，间接引发CORS错误。需要在vercel.json中配置大文件支持：

{
  "functions": {
    "api/*.js": {
      "maxDuration": 60,
      "bodySize": "50mb" // 根据你的视频大小调整
    }
  }
}

• 确保Express入口文件放在api/目录下，Vercel会自动识别为Serverless Functions。

AWS部署注意事项

• 若使用API Gateway：需在Gateway控制台单独配置CORS规则，允许对应Origin、Methods（必须包含OPTIONS）和Headers，API Gateway的CORS配置优先级高于Express中间件。
• 若使用EC2/ECS：检查反向代理（如Nginx）是否正确转发OPTIONS请求，可添加如下配置：

location / {
  if ($request_method = OPTIONS) {
    add_header Access-Control-Allow-Origin "https://你的前端域名.com";
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    add_header Access-Control-Allow-Headers "Content-Type, Authorization";
    return 200;
  }
  // 其他转发配置
}

3. 验证前端请求的正确性 #

确认前端上传视频时，Content-Type为multipart/form-data，不要手动设置为application/json；如果携带自定义请求头（如Authorization），需在CORS配置中显式允许。

4. 排查本地与生产环境的差异 #

• 用Postman直接发送OPTIONS请求到生产API，查看响应头是否包含Access-Control-Allow-Origin等CORS相关字段，若没有则说明服务器未正确处理预检请求。
• 检查生产环境的环境变量（如ALLOWED_ORIGINS）是否配置正确，避免域名拼写错误、多斜杠等问题。

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