前后端跨服务器部署时的CORS错误解决方案咨询

核心问题排查与修复步骤 #

1. 前端proxy配置仅适用于开发环境

你在前端package.json里加的proxy配置只在本地开发时生效（比如用npm start启动的开发服务器），生产环境部署的前端完全不会使用这个配置，所以生产环境下必须依赖后端正确配置CORS规则，这是最容易踩的坑。

2. 避免CORS配置冲突

同时在vercel.json和server.ts中配置CORS会导致响应头重复或规则冲突，建议只保留一种配置方式：

方式一：用代码（server.ts）配置CORS

确保cors中间件在所有路由之前注册，并且显式处理OPTIONS预检请求：

import express from 'express';
import cors from 'cors';

const app = express();

// 全局注册CORS中间件，覆盖所有路由
app.use(cors({
  origin: '*',
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

// 手动处理OPTIONS请求（部分框架自动处理，但显式配置更保险）
app.options('*', cors());

// 注册你的业务路由
app.get('/api/trend', (req, res) => {
  res.json({ data: 'example' });
});

export default app;

方式二：用Vercel的vercel.json配置CORS

如果选择用Vercel配置，删除代码中的cors中间件，确保vercel.json覆盖所有路由并包含完整的CORS头：

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        { "key": "Access-Control-Allow-Methods", "value": "GET,POST,PUT,DELETE,OPTIONS" },
        { "key": "Access-Control-Allow-Headers", "value": "Content-Type,Authorization" }
      ]
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/server.ts"
    }
  ],
  "functions": {
    "server.ts": {
      "runtime": "@vercel/node@2.0.0"
    }
  }
}

3. 确保Vercel路由配置正确

Vercel是无服务器平台，必须通过vercel.json的routes字段将所有请求指向你的后端入口文件（比如server.ts），否则请求会返回404，而浏览器会将404响应判定为CORS错误（因为404响应没有携带CORS头）。

4. 验证部署与响应头

• 修改配置后必须重新部署Vercel后端，否则新配置不会生效。
• 用浏览器开发者工具的Network面板查看请求：
  • 检查预检请求（OPTIONS）的响应状态码是否为200。
  • 查看实际请求的响应头中是否包含正确的Access-Control-Allow-Origin等字段。

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