部署MERN应用至Vercel后出现预检请求跨域错误求助

问题描述 #

将MERN应用前后端部署至Vercel后，出现CORS错误：
Response to preflight request doesn't pass access control check: It does not have HTTP ok status

已尝试以下操作但未解决：

• 多次重新部署应用
• 将Access-Control-Allow-Origin设为*
• 在server.js中尝试使用cors()中间件（目前未启用）
• 查阅谷歌、ChatGPT、YouTube上的相关方案

当前vercel.json配置如下：

{
    "version": 2,
    "builds": [
      {
        "src": "*.js",
        "use": "@vercel/node"
      }
    ],
    "rewrites": [
      {
        "source": "/api/(.*)",
        "destination": "/api/$1"
      },
      {
        "source": "/(.*)",
        "destination": "/"
      }
    ],
    "headers": [
      {
        "source": "/api/(.*)",
        "headers": [
          { "key": "Access-Control-Allow-Credentials", "value": "true" },
          { "key": "Access-Control-Allow-Origin", "value": "https://snap-vault.vercel.app" },
          { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,DELETE,POST,PUT" },
          { "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, Authorization" }
        ]
      }
    ]
  }

解决方案 #

1. 确保OPTIONS请求得到正确响应 #

预检请求属于OPTIONS方法，如果后端未返回200 OK状态码，即使vercel.json配置了CORS头也会失败。可以通过两种方式处理：

• 手动处理OPTIONS请求：在server.js中添加以下代码：

app.options('*', (req, res) => {
  res.sendStatus(200);
});

• 正确配置cors中间件：重新启用cors中间件，并匹配vercel.json中的规则，避免冲突：

const cors = require('cors');
app.use(cors({
  origin: 'https://snap-vault.vercel.app',
  credentials: true,
  methods: ['GET', 'OPTIONS', 'DELETE', 'POST', 'PUT'],
  allowedHeaders: ['X-CSRF-Token', 'X-Requested-With', 'Accept', 'Accept-Version', 'Content-Length', 'Content-MD5', 'Content-Type', 'Date', 'X-Api-Version', 'Authorization']
}));

启用中间件后可暂时注释vercel.json中的CORS头配置，防止重复设置。

2. 修正vercel.json的路由与构建配置 #

当前rewrites规则可能导致API请求被错误重定向到前端页面，同时builds配置可能匹配到无关文件。调整如下：

{
  "version": 2,
  "builds": [
    // 假设后端API文件放在api目录下，根据实际项目结构调整
    {
      "src": "api/*.js",
      "use": "@vercel/node"
    },
    // 前端构建产物路径，以create-react-app的build目录为例
    {
      "src": "build/**",
      "use": "@vercel/static"
    }
  ],
  "rewrites": [
    // 优先处理API请求，确保指向正确的后端文件
    {
      "source": "/api/(.*)",
      "destination": "/api/$1.js"
    },
    // 其余请求指向前端静态文件
    {
      "source": "/(.*)",
      "destination": "/build/$1"
    }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
        { "key": "Access-Control-Allow-Origin", "value": "https://snap-vault.vercel.app" },
        { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,DELETE,POST,PUT" },
        { "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, Authorization" }
      ]
    }
  ]
}

注意：需根据你的实际项目结构修改builds中的src路径，比如后端入口是根目录的server.js，则对应"src": "server.js"。

3. 排查Vercel部署日志 #

进入Vercel控制台，查看Serverless Functions的日志，确认：

• OPTIONS请求是否成功到达后端
• 后端返回的状态码是否为200
  如果请求未到达后端，说明rewrites配置有误；如果返回非200状态码，需排查后端的错误处理逻辑。

4. 清除浏览器缓存测试 #

浏览器可能缓存旧的CORS规则，尝试用无痕模式访问，或清除浏览器缓存后重新测试。

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