MERN栈中Express无法获取React端Cookie：req.cookies.token未定义问题

看起来你遇到的问题是前端明明存在Cookie，但后端始终拿不到req.cookies.token，我帮你梳理下几个关键问题点和修复方案：

1. 前端Fetch请求未携带Credentials #

默认情况下，fetch不会自动发送Cookie到跨域请求中，你需要显式配置credentials: 'include'（跨域场景下用这个，同域场景用'same-origin'也可）。同时注意React Hook不能在异步函数内部调用，我帮你调整了代码结构：

import { useParams, useEffect, useState } from 'react-router-dom'
export default function Post() {
  const [post, setPost] = useState([]);
  const { slug } = useParams(); // Hook必须放在组件顶层

  const loadPost = async () => {
    try {
      const response = await fetch(`http://localhost:5050/api/post/${slug}`, {
        credentials: 'include' // 关键配置：携带Cookie发送请求
      });
      const res = await response.json();
      setPost([res]);
    } catch (err) {
      console.error('加载文章失败:', err);
    }
  }

  useEffect(() => {
    loadPost();
  }, [slug]) // 依赖项添加slug，路由变化时自动重新请求

  return (
    <>
    ...///
    </>
  )
}

2. 前后端端口不一致 #

你的Express代码中服务启动在5050端口（或环境变量配置的端口），但前端fetch请求的是5000端口，这会导致跨域请求不匹配，Cookie自然无法传递。一定要保证请求的后端地址和实际启动的端口完全一致！

3. 验证Cookie的属性设置 #

如果你的Cookie是在登录接口设置的，要确保：

• Cookie的domain设置为localhost（或留空，默认匹配当前域名）
• path设置为/，保证整个站点都能访问该Cookie
• 本地开发时避免设置SameSite: Strict，建议用Lax或不设置（SameSite: None需要配合Secure属性，本地http环境无法使用）

4. 后端配置确认 #

你的后端CORS配置{ origin: 'http://localhost:3000', credentials: true }和cookie-parser中间件的使用是正确的，这部分无需修改，只要确保origin和前端实际运行地址完全一致即可。

最后验证 #

修改完成后重启前后端服务，打开浏览器开发者工具：

• 在Network标签查看/api/post/:slug请求，确认Request Headers中存在Cookie字段
• 后端authenticate中间件就能正确打印出req.cookies.token了

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