Vercel部署MERN项目CORS问题：预检请求未通过访问控制校验

针对你遇到的跨域请求被CORS策略阻止、预检请求无Access-Control-Allow-Origin头的问题，结合你已尝试的配置，给出以下排查和解决步骤：

• 确保CORS中间件加载顺序正确
  CORS中间件必须在所有路由定义之前加载，否则路由不会应用CORS规则。示例代码如下：

  const express = require('express');
  const cors = require('cors');
  const app = express();
  
  // 先加载CORS中间件
  app.use(cors({
      origin: "https://hr360.vercel.app",
      methods: ["POST", "GET", "OPTIONS"], // 必须包含OPTIONS方法以支持预检请求
      credentials: true
  }));
  
  // 再定义/login路由
  app.post('/users/login', (req, res) => {
      // 你的登录逻辑
  });
  

• 不要同时混用两种CORS配置
  你同时使用了cors包和自定义的响应头中间件，两者会导致响应头冲突，只保留一种配置即可。推荐使用官方cors包，它会自动处理预检请求的细节。

• 配置Vercel的边缘网络规则
  由于后端部署在Vercel上，平台的边缘网络可能会拦截请求，需要在项目根目录创建vercel.json文件添加全局头配置：

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

  部署后，Vercel会自动应用这些头规则，覆盖后端返回的头（如果有冲突）。

• 验证预检请求的响应
  打开浏览器开发者工具的Network面板，找到OPTIONS类型的预检请求，查看响应头是否包含Access-Control-Allow-Origin：

  • 如果没有，说明CORS中间件未生效，检查代码是否存在语法错误、中间件是否被其他逻辑提前拦截。
  • 如果有，但仍报错，确认前端请求的credentials设置与后端一致：前端若设置了withCredentials: true，后端必须指定具体源而非*。

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