React与Express跨域Cookie设置及携带失败问题求助

服务器端修改 #

1. 配置CORS允许跨域带凭证 #

React（3000端口）与Express（4000端口）属于跨域环境，必须在Express中配置CORS，明确允许指定来源并开启凭证支持：

const cors = require('cors');
// 需放在所有路由配置之前
app.use(cors({
  origin: 'http://localhost:3000', // 精确指定React应用地址
  credentials: true // 允许请求携带Cookie等凭证
}));

2. 修正Cookie的SameSite和Secure属性 #

本地开发使用HTTP协议，而SameSite: 'None'要求Secure: true，但HTTP环境下浏览器不会保存带Secure属性的Cookie，导致Cookie无法在Application标签显示。调整为根据环境动态设置：

exports.generateToken = (res, userId) => {
  const token = jwt.sign({ userId }, process.env.JWT_SECRET, {
    expiresIn: '5d',
  });

  res.cookie('jwt', token, {
    path:'/',
    httpOnly: true, // 建议设为true，避免前端XSS窃取Cookie
    secure: process.env.NODE_ENV === 'production', // 生产环境HTTPS下开启
    sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax', // 生产适配跨域，本地用Lax
    maxAge: 5 * 24 * 60 * 60 * 1000, 
  });
};

3. 启用Cookie解析中间件 #

Express默认不会解析Cookie，需安装并使用cookie-parser才能通过req.cookies获取Cookie：

const cookieParser = require('cookie-parser');
app.use(cookieParser());

客户端修改 #

修正Fetch请求的凭证配置 #

Fetch API中不存在withCredentials属性（这是Axios的配置项），跨域请求时需将credentials设为'include'，才能让浏览器自动携带Cookie：

const handleVerifyUser = async () => {
  setName(() => "");
  setPassword(() => "");
  setDepartment(() => "");
  setEmail(() => "");
  const res = await fetch("http://localhost:4000/api/v2/verifyUser", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    credentials: "include", // 跨域请求必须设置为include
    body: JSON.stringify({
      token: otp,
    }),
  });
  const data = await res.json();
  console.log(data);
  if (data.success === true) {
    setMessage(() => data.message);
    setTimeout(() => {
      setMessage(null);
    }, 2000);
  } else {
    setMessage(() => data.message);
    setTimeout(() => {
      setMessage(null);
    }, 2000);
  }
};

额外注意 #

所有需要携带Cookie的后续请求，都必须添加credentials: "include"配置，否则浏览器不会自动带上Cookie。

内容的提问来源于stack exchange，提问作者Nimish G j