跨域场景下Node Express读取Cookie为空问题咨询

嘿，我来帮你搞定这个house_user Cookie读不到的问题！核心原因是你的React应用（8080端口）和Node服务（3000端口）属于跨域环境，浏览器出于安全默认不会在跨域请求中携带Cookie，所以后端自然读不到。下面是一步步的解决方案：

1. 后端Express配置跨域支持 #

首先你需要安装并配置cors中间件，它能帮你处理跨域请求的权限问题：

步骤1：安装cors #

在你的Node项目里执行：

npm install cors

步骤2：修改后端代码 #

更新你的Express配置，允许前端地址跨域请求并携带Cookie：

const cookieParser = require('cookie-parser');
const crypto = require('crypto');
const express = require('express');
const cors = require('cors'); // 引入cors中间件
const app = express();

// 关键配置：允许指定前端地址跨域，同时开启Cookie携带
app.use(cors({
  credentials: true, // 必须设为true，允许携带Cookie
  origin: 'http://localhost:8080' // 严格指定你的React应用地址，不能用*
}));

app.use(cookieParser());

app.get('/', function (req, res) {
  let user_token = req.cookies['house_user'];
  console.log('读取到的Cookie：', user_token); // 现在应该能拿到值了

  if (user_token) {
    // 你的业务逻辑
    res.send('已识别用户Token');
  } else {
    // 可以先设置一个测试Cookie验证
    res.cookie('house_user', crypto.randomUUID(), {
      httpOnly: true, // 提升安全性，防止前端JS读取
      sameSite: 'Lax', // 本地开发用Lax即可，跨域请求会携带Cookie
      path: '/' // 确保Cookie在整个站点生效
    });
    res.send('已设置测试Cookie，请刷新重试');
  }
});

app.listen(3000, () => {
  console.log('Node服务运行在http://localhost:3000');
});

2. 前端请求配置 #

前端发起请求时，必须明确告诉浏览器要携带Cookie，不同请求方式的配置如下：

如果用Fetch API： #

fetch('http://localhost:3000/', {
  method: 'GET',
  credentials: 'include' // 关键，携带跨域Cookie
})
.then(response => response.text())
.then(data => console.log(data))
.catch(err => console.error('请求出错：', err));

如果用Axios： #

axios.get('http://localhost:3000/', {
  withCredentials: true // 关键配置
})
.then(response => console.log(response.data))
.catch(error => console.error('请求出错：', error));

3. 额外注意事项 #

• 不要把cors的origin设为*，否则credentials: true会失效，浏览器不会携带Cookie
• 设置Cookie时，sameSite属性不要设为Strict，否则只有同域请求才会携带Cookie，跨域场景下用Lax（本地开发）或None（生产环境HTTPS下）
• 确保前端请求的地址和后端配置的origin完全一致（比如不要把http://localhost:8080写成localhost:8080，协议不能少）

按上面的步骤配置后，你应该就能正常读取到house_user Cookie了！

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