Vercel部署后端遇500错误及CORS问题求解决方案

先处理500 Internal Server Error #

这是优先级更高的问题——服务器内部出错时，CORS头往往无法正常返回，直接导致后续的跨域报错。

• 查看Vercel日志：登录Vercel控制台进入项目，找到「Functions」->「Logs」，这里会显示具体错误栈（比如依赖缺失、代码语法错误、环境变量未配置），是定位问题的核心依据。
• 本地验证：在本地启动后端服务，测试所有API接口，确保本地无报错。如果本地正常，大概率是部署时的配置问题。
• 核对部署命令：检查package.json的scripts字段，Vercel默认会执行build（若存在）和start命令。比如Node.js项目，start脚本需指向入口文件，如"start": "node index.js"。
• 环境变量同步：如果后端用到数据库密钥、API密钥等环境变量，必须在Vercel控制台「Settings」->「Environment Variables」中添加，确保键值和本地.env文件一致。

再解决CORS跨域问题 #

当500错误修复后，若仍存在CORS报错，从以下方向排查：

• 确认CORS中间件挂载顺序：app.use(cors())必须放在所有路由定义（app.get()/app.post()等）之前，否则路由请求不会经过CORS处理。
• 优化CORS配置：
  • 若需要携带凭证（如Cookie），禁止用通配符*作为origin，改为指定前端域名，示例：

    const corsOptions = {
      origin: 'https://your-frontend-domain.vercel.app',
      credentials: true
    };
    app.use(cors(corsOptions));
    

  • 如需支持多个域名，可使用数组或动态判断逻辑：

    const allowedOrigins = ['https://domain1.com', 'https://domain2.com'];
    const corsOptions = {
      origin: (origin, callback) => {
        if (allowedOrigins.includes(origin) || !origin) callback(null, true);
        else callback(new Error('Not allowed by CORS'));
      }
    };
    app.use(cors(corsOptions));
    

• 用Vercel全局配置补位：若代码层CORS配置仍不生效，可在项目根目录创建vercel.json，通过Vercel全局头配置强制添加CORS规则：

  {
    "headers": [
      {
        "source": "/(.*)",
        "headers": [
          { "key": "Access-Control-Allow-Origin", "value": "https://your-frontend-domain.vercel.app" },
          { "key": "Access-Control-Allow-Methods", "value": "GET, POST, PUT, DELETE, OPTIONS" },
          { "key": "Access-Control-Allow-Headers", "value": "Content-Type, Authorization" }
        ]
      }
    ]
  }
  

• 处理预检请求：确保服务器能正确响应OPTIONS请求。CORS中间件通常会自动处理，但如果手动拦截了OPTIONS请求，需返回200状态码和对应头信息。

内容的提问来源于stack exchange，提问作者Muhammad Iqbal M