MERN栈API认证遇CORS错误，已配置CORS仍无法解决求帮助

问题描述 #

使用MERN栈开发API认证，后端已配置CORS中间件允许所有源，但前端发起注册请求时仍触发CORS错误：

Access to XMLHttpRequest at 'http://localhost:4000/api/register' from origin 'http://localhost:3001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource。

问题原因 #

1. 后端中间件顺序错误：app.js中cors中间件被放在路由注册之后。Express中间件按注册顺序执行，导致/api开头的请求先进入路由处理，未经过CORS中间件，preflight请求（OPTIONS）无法获取到Access-Control-Allow-Origin响应头。
2. 凭证配置冲突：前端开启了axios.defaults.withCredentials = true，但后端CORS配置用了origin: "*"——浏览器规定，当请求携带凭证时，Access-Control-Allow-Origin不能设为通配符，必须指定具体源。

解决办法 #

1. 调整后端中间件顺序并修正CORS配置 #

修改app.js，将CORS中间件移至路由之前，并配置匹配前端源和允许凭证：

import express from "express";
const app = express();
import mongoose from "mongoose";
import bodyParser from "body-parser";
import routes from "./Routes/index.js";
import passport from "passport";
import jwt from "./config/passport.js";
import cors from "cors";
import User from "./Models/User.js";
import Todo from "./Models/Todo.js";

mongoose
  .connect("mongodb://127.0.0.1:27017/hello")
  .then(() => {
    console.log("DB connection is successfull!");
  })
  .catch((error) => console.log(error));

// 优先加载CORS中间件
app.use(cors({
  origin: "http://localhost:3001", // 指定前端具体源
  credentials: true // 允许携带凭证
}));

app.use(bodyParser.json());
app.use("/api", routes); // 路由放在CORS之后
passport.use("jwt", jwt);

app.get("/", (req, res) => {
  res.send("hello world!!");
});

app.listen(4000, () => {
  console.log("Server is running at http://localhost:4000");
});

2. 验证修改效果 #

重启后端服务后，前端发起注册请求，CORS错误应被解决。若仍有问题，可检查：

• 后端服务是否正常运行在4000端口
• 前端请求URL是否正确
• 浏览器Network面板中，OPTIONS请求的响应头是否包含Access-Control-Allow-Origin和Access-Control-Allow-Credentials

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