React与Node间PATCH请求遭CORS拦截问题求助

问题核心 #

你遇到的情况是：POST、GET请求正常，但PATCH请求被CORS拦截，错误提示预检响应的Access-Control-Allow-Methods中不包含PATCH方法，且已在后端配置了cors模块。

解决方案 #

1. 调整CORS中间件的挂载顺序

中间件是按代码顺序生效的，必须确保app.use(cors(...))在所有路由挂载之前执行，否则路由的预检OPTIONS请求不会被CORS中间件处理，导致响应头缺失允许PATCH的配置。

正确示例：

const cors = require("cors");
const app = express();
mongoose.connect(`mongodb://localhost:27017/frontdesk`);

// 先挂载CORS中间件
app.use(
  cors({
    origin: "*",
    methods: ["GET", "HEAD", "PUT", "PATCH", "POST", "DELETE"], // 改用数组格式更可靠
    allowedHeaders: ["Authorization", "Content-Type"] // 明确允许的请求头，避免预检失败
  })
);

// 再挂载你的路由（比如admin路由）
app.use('/admin', require('./routes/admin'));

2. 移除前端请求中多余的响应头

前端Axios请求里的"Access-Control-Allow-Origin": "*"是后端才需要返回的响应头，前端发送这个头完全多余，反而可能干扰预检流程，直接删除：

axiosInstance
  .patch(
    `/admin/appointment/${id}`,
    { status: "Finished" },
    {
      headers: {
        Authorization: token,
        "Content-Type": "application/json"
        // 删掉Access-Control-Allow-Origin这一行
      },
    }
  )
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.log(err);
  });

3. 确保Auth中间件不拦截OPTIONS请求

预检请求用的是OPTIONS方法，不会携带Authorization头，如果你的auth中间件强制验证token，会直接拒绝OPTIONS请求，导致预检失败。修改auth中间件，跳过OPTIONS请求：

const auth = (req, res, next) => {
  // 跳过OPTIONS预检请求
  if (req.method === 'OPTIONS') {
    return next();
  }
  // 原有token验证逻辑
  const token = req.headers.authorization;
  // ... 你的验证代码
};

4. 修复后端路由的逻辑错误（额外提示）

即使解决了CORS问题，你的后端PATCH路由还有变量错误：appointmentModel.update里的number是未定义变量，应该替换为接收的AppointmentToUpdate，否则会返回500错误：

router.patch('/appointment/:id', auth, async (req, res) => {
try {
    const id = req.params.id;
    const AppointmentToUpdate = req.body;
    // 把number改成AppointmentToUpdate
    const updatedAppointment = await appointmentModel.update({ _id: id }, AppointmentToUpdate, { runValidators: true });
    res.json(updatedAppointment);
}catch (err) {
    res.status(500).send(err.message);
}
})

内容的提问来源于stack exchange，提问作者Xyz.WebDeveloper