ReactJS前端与Node.js后端交互时Cookie无法传递，后端req.cookies为空的问题排查

嘿，我来帮你分析下为什么后端拿不到前端设置的Cookie——核心问题出在跨域请求的凭证传递规则上，具体有两个关键原因：

1. Axios 默认不会在跨域请求里携带 Cookie #

你的前端和后端运行在不同端口（前端一般是localhost:3000，后端是localhost:4000），属于跨域场景。Axios 默认配置withCredentials: false，这意味着它不会把当前页面的Cookie发送给跨域的后端服务器，哪怕你用document.cookie手动设置了Cookie也没用。

2. 后端 CORS 配置未开启凭证支持 #

就算前端开启了携带Cookie的配置，如果后端的CORS没明确允许接收凭证，浏览器会因为同源策略的安全限制，直接把Cookie拦截下来，根本不会发送到后端。而且这里要注意：当开启凭证支持时，Access-Control-Allow-Origin不能设为*（通配符），必须指定具体的前端域名。

现在给你修改代码的具体方案： #

前端修改（二选一）

• 单个请求配置：在axios的POST请求里添加withCredentials: true参数：

axios.post('http://localhost:4000/hello', {}, { withCredentials: true })
  .then(res1 => {
    setRes(res1.data)
  })

• 全局配置：如果项目里很多请求都需要携带Cookie，可以在axios初始化时全局设置：

// 在axios导入后添加全局配置
axios.defaults.withCredentials = true;

后端修改CORS配置

把原来的app.use(cors());改成指定允许的前端域名，并开启凭证支持：

app.use(cors({
  origin: 'http://localhost:3000', // 替换成你实际的前端地址
  credentials: true
}));

额外补充（可选） #

如果做完上面的配置还是有问题，可能是Cookie的SameSite属性限制：
现在主流浏览器默认的SameSite是Lax，跨域POST请求里不会携带这种Cookie。你可以在设置Cookie时显式指定SameSite=None，同时加上Secure（仅HTTPS环境有效，本地HTTP开发可以暂时去掉Secure）：

document.cookie='hello=3; SameSite=None; Secure';

这样修改后，后端就能正常拿到req.cookies里的hello=3了～

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