Vercel部署Node.js API与React项目的CORS问题求助

你遇到的问题是已配置cors()中间件但仍出现CORS报错，预检请求未返回Access-Control-Allow-Origin头，以下是针对性解决方案：

• 检查cors中间件加载顺序
  确保app.use(cors())或自定义的cors配置在所有路由定义之前执行。如果路由先被注册，中间件不会对路由请求生效，示例：

  const express = require('express');
  const cors = require('cors');
  const app = express();
  
  // 先加载cors中间件
  app.use(cors());
  // 再注册路由
  app.use('/api/xxx', require('./routes/xxx'));
  
  app.listen(process.env.PORT || 3000);
  

• 显式指定允许的Origin
  避免使用默认的*（尤其是涉及凭证请求时），直接指定你的React项目域名，示例：

  const corsOptions = {
    origin: 'https://xxxxx-vercel.app', // 替换为你的React域名
    credentials: true, // 若请求带Cookie/Authorization头需开启
    optionsSuccessStatus: 200
  };
  app.use(cors(corsOptions));
  

  多环境场景可通过Vercel环境变量动态配置：

  const allowedOrigins = process.env.ALLOWED_ORIGINS?.split(',') || [];
  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项目的「Settings > Environment Variables」中添加ALLOWED_ORIGINS，值为你的React域名（多个用逗号分隔）。

• 通过Vercel配置文件强制设置CORS头
  Vercel的Serverless函数可能会覆盖Express中间件的响应头，可在项目根目录创建vercel.json，直接为API路由配置CORS头：

  {
    "functions": {
      "api/**/*.js": {
        "headers": {
          "Access-Control-Allow-Origin": "https://xxxxx-vercel.app",
          "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
          "Access-Control-Allow-Headers": "Content-Type, Authorization"
        }
      }
    }
  }
  

• 手动处理OPTIONS预检请求
  若cors中间件未自动处理OPTIONS请求，可手动添加全局或路由级的OPTIONS处理：

  // 全局处理所有OPTIONS请求
  app.options('*', cors(corsOptions));
  // 或针对特定API路由
  app.options('/api/xxx', cors(corsOptions));
  

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