React电商Vercel部署后登录接口CORS跨域及状态异常问题

问题分析 #

第二个报错的核心原因是：浏览器发送的OPTIONS预请求没有得到HTTP 2XX（如200/204）的响应状态码。预请求是浏览器在发送跨域POST/PUT等非简单请求前自动发起的，用于确认服务器是否允许跨域操作，若服务器未正确处理OPTIONS请求，浏览器就会拦截后续的实际请求。

解决方案 #

方案1：后端显式处理OPTIONS请求（推荐，适配Express等框架） #

如果你的后端基于Express，直接在登录接口路由中添加OPTIONS请求的处理逻辑，返回符合要求的CORS头和状态码：

// 先处理OPTIONS预请求
app.options('/api/auth/login', (req, res) => {
  // 设置允许的跨域源
  res.setHeader('Access-Control-Allow-Origin', 'https://react-js-e-commerce-store-client.vercel.app');
  // 允许携带凭证（如Cookie）
  res.setHeader('Access-Control-Allow-Credentials', 'true');
  // 允许的请求方法
  res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
  // 允许的请求头
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  // 返回204表示无内容，符合预请求规范
  res.sendStatus(204);
});

// 再挂载登录接口的POST处理
app.post('/api/auth/login', loginUser);

更高效的方式是使用cors中间件统一配置，避免手动写重复逻辑：

1. 安装依赖：

npm install cors

2. 在后端入口文件（如app.js）中配置：

const cors = require('cors');

const corsConfig = {
  origin: 'https://react-js-e-commerce-store-client.vercel.app',
  credentials: true,
  methods: ['GET', 'POST', 'OPTIONS', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
};

// 全局应用配置，或仅针对/auth路由
app.use('/api/auth', cors(corsConfig));
app.post('/api/auth/login', loginUser);

方案2：修正Vercel路由配置 #

你的vercel.json存在格式错误（多余逗号）、缺少预请求必需头信息的问题，修正后的配置如下：

{
  "routes": [
    {
      "src": "/api/(.*)",
      "headers": {
        "Access-Control-Allow-Origin": "https://react-js-e-commerce-store-client.vercel.app",
        "Access-Control-Allow-Credentials": "true",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type, Authorization"
      },
      "dest": "/api/$1"
    }
  ]
}

注意：

• 确保dest路径指向正确的API路由文件（比如你的auth.routes.js如果在api目录下，路径应为/api/auth.routes.js）
• Vercel的路由配置会自动处理OPTIONS请求，但必须包含完整的CORS头信息

额外注意点 #

• 确认res.cookie中的httpOnly设置：如果需要前端读取Cookie，设为false；如果仅让HTTP请求携带，建议设为true（更安全），但要确保后端能正确解析
• 部署后需重新触发Vercel的部署流程，确保配置生效

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