将MERN栈服务器部署到Vercel后出现CORS错误，如何解决？

问题分析 #

你遇到的CORS错误源于服务器响应缺少正确的Access-Control-Allow-Origin头，同时代码存在重复的CORS配置，客户端还错误设置了仅服务器需返回的响应头，这些因素导致预检请求失败。

解决方案步骤 #

1. 修正客户端请求代码 #

客户端无需设置Access-Control-Allow-Origin头（这是服务器返回给浏览器的响应头），直接移除该配置：

fetch('https://blood-management-server.vercel.app/donor', {
    method: 'POST',
    headers: {
        'content-type': 'application/json'
    },
    body: JSON.stringify(donor)
})

2. 清理服务器端重复的CORS配置 #

服务器同时使用了cors包和自定义res.header中间件，两者会产生冲突，保留cors包的配置即可（它能自动规范处理预检请求）：

const express = require("express");
const { MongoClient, ServerApiVersion } = require("mongodb");
const cors = require("cors");
require("dotenv").config();

const app = express();
const port = process.env.PORT || 5000;

//Middleware
const corsOptions = {
  origin: "https://bloodcare-bangladesh.web.app",
  methods: ["GET", "POST"],
  allowedHeaders: ["Content-Type"],
};
// 仅保留cors包的中间件配置
app.use(cors(corsOptions));
app.use(express.json());

// 移除以下自定义CORS中间件，避免冲突
// app.use((req, res, next) => {
//   res.header('Access-Control-Allow-Origin', 'https://bloodcare-bangladesh.web.app');
//   res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
//   next();
// });

// 剩余MongoDB连接和路由代码保持不变...

3. 确认Vercel环境变量配置 #

本地.env文件不会同步到Vercel，需在Vercel项目的Settings > Environment Variables中手动添加：

• BD_USER: MongoDB用户名
• DB_PASS: MongoDB密码

4. 验证部署 #

重新部署服务器到Vercel后：

• 先用Postman测试POST /donor接口，确认能正常返回数据
• 再在客户端测试注册功能，检查CORS错误是否消失

内容的提问来源于stack exchange，提问作者Md Ahad Ali