MERN栈中Cookie存储的JWT无法被req.cookies获取的问题

问题原因分析 #

1. Cookie域名配置错误：后端设置Cookie时写了domain: "localhost:3000"，但域名字段仅包含域名本身，不能带端口。浏览器会因域名不匹配，拒绝在/main路径的请求中携带Cookie。
2. 前端Logout请求未携带凭证：Logout组件的fetch请求未添加credentials: "include"，导致浏览器不会将Cookie发送到后端，最终req.cookies为空。
3. CORS配置冗余：CORS的origin不需要包含路径（如/main），origin仅指协议+域名+端口，多余的路径会导致CORS逻辑混乱。
4. 路由拼写错误：前端请求的是/api/refeshToken/，后端路由实际是/api/refreshToken/，少了字母r，会导致请求无法匹配接口。

解决方案 #

后端代码修正 #

1. 修正Cookie域名配置（auth.js）

将Cookie的domain改为localhost，或直接删除该字段（默认会自动适配当前域名）：

res
  .cookie("jwtoken", refreshToken, {
    maxAge: 1296000000,
    path: "/",
    domain: "localhost",
    httpOnly: true,
    // 生产环境建议开启secure，本地http环境可注释
    // secure: process.env.NODE_ENV === "production"
  })
  .status(200)
  .json({
    error: false,
    accessToken,
    refreshToken,
    message: "Logged in sucessfully!",
  });

2. 简化CORS配置（server.js）

origin仅保留域名+端口，删除多余的路径：

app.use(
  cors({
    origin: "http://localhost:3000",
    methods: ["GET", "POST", "PUT", "DELETE"], // 修正原配置中的"UPDATE"为标准方法"PUT"
    credentials: true,
  })
);

前端代码修正 #

1. Logout请求添加凭证携带（Logout.js）

在fetch中添加credentials: "include"，确保Cookie被发送到后端：

const logoutUser = async () => {
  const response = await fetch("http://localhost:5000/api/refreshToken/", {
    headers: {
      "Content-type": "application/json",
    },
    method: "GET",
    credentials: "include",
  });
  const data = await response.json();

  if (!data.error) { // 修正原判断条件，匹配后端返回格式
    alert("Logged out successfuly");
    window.location.href = "/";
  }
};

2. 修正路由拼写错误

将前端请求路径/api/refeshToken/改为/api/refreshToken/，补全缺失的字母r。

额外优化建议 #

• 后端refreshToken路由中，需确保解析req.user的中间件正确读取Cookie中的jwtoken并完成解析，否则req.user会不存在，导致后续逻辑报错。
• 登录成功后，localStorage.setItem("token", data)存储了整个响应对象，建议改为仅存accessToken：localStorage.setItem("accessToken", data.accessToken)，减少冗余存储。

内容的提问来源于stack exchange，提问作者boom pow