在Vercel部署React+NodeJS项目时配置CORS仍遇跨域错误求助

以下是针对你遇到的已配置CORS仍报错问题的排查方向和解决办法：

1. 移除重复的CORS头配置 #

你同时在NodeJS中间件和vercel.json中设置了Access-Control-Allow-Origin等头，这会导致响应中出现重复的头信息，浏览器会直接判定跨域错误。

解决方式：保留其中一处配置即可。推荐保留NodeJS的中间件配置（更灵活，方便本地开发时动态调整Origin），删除vercel.json路由中的headers部分：

{
  "version": 2,
  "name": "virmigo",
  "builds": [{ "src": "app.js", "use": "@vercel/node" }],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "./app.js",
      "methods": ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"]
    }
  ]
}

2. 正确处理OPTIONS预请求 #

浏览器发送跨域请求前会先发起OPTIONS预请求，你的NodeJS中间件目前没有针对OPTIONS请求做特殊处理，可能导致预请求响应不符合要求。

修改NodeJS中间件代码：添加OPTIONS请求的直接响应逻辑：

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "https://virmigo.vercel.app");
  res.setHeader("Access-Control-Allow-Credentials", "true");
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, PATCH, DELETE");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
  );
  // 直接响应OPTIONS预请求，无需进入后续路由
  if (req.method === 'OPTIONS') {
    return res.sendStatus(204);
  }
  next();
});

3. 清除Vercel部署缓存 #

Vercel的部署缓存可能导致新的CORS配置未生效，需要强制刷新缓存重新部署。

操作步骤：

• 进入Vercel控制台的项目页面
• 点击顶部的"Deployments"标签
• 找到最新的部署记录，点击右侧的三个点，选择"Redeploy"
• 在弹出的窗口中勾选"Clear build cache"，然后确认重新部署

4. 验证前端请求配置 #

确保前端请求满足以下要求：

• 请求的后端地址是Vercel部署的Node服务地址，而非本地地址
• 如果请求需要携带凭证（如Cookie），前端请求需开启withCredentials（比如Axios中设置axios.defaults.withCredentials = true）

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