React集成Express设置Cookie失效问题排查与解决方案

问题场景 #

在React应用中通过Express后端设置Cookie时遇到异常：用Postman测试对应API能成功设置Cookie，但在React前端发起请求后，Cookie无法同步到浏览器，仅在后端生效。

初始代码 #

Express 后端代码 #

app.post("/", (req, res) => {
  const { username } = req.body;
  const token = jwt.sign({username}, "secret", {
    expiresIn: 3 * 24 * 60 * 60,
  });
  res.status(200).cookie("token", token, { path: "/" }).send('cookie set');
});

React 前端请求代码 #

const signup = (e) => {
  e.preventDefault();
  Axios
    .post(
      "http://localhost:3001",
      {
        username: username,
        password: password,
      },
      {
        withCredentials: true,
      }
    )
    .then((res) => {
      console.log(res.data);
    });
};

问题原因 #

浏览器的Cookie安全策略要求Cookie必须包含必要属性才能被正确存储和携带。初始代码仅设置了path属性，缺少sameSite、expires、httpOnly等关键配置，导致浏览器拒绝在前端环境中存储该Cookie。

解决后的Express后端代码 #

通过补充Cookie的安全配置参数，解决了Cookie无法同步的问题：

app.post("/", (req, res) => {
  const { username } = req.body;
  const token = jwt.sign({ username }, "secret", {
    expiresIn: 3 * 24 * 60 * 60,
  });
  res
    .status(200)
    .cookie("token", token, {
        sameSite: 'strict',
        path: '/',
        expires: new Date(new Date().getTime() + 100 * 1000),
        httpOnly: true,
    }).send("cookie being initialised")
});

关键配置说明 #

• sameSite: 'strict'：限制Cookie仅在同源请求中携带，防范CSRF攻击，同时符合浏览器Cookie存储规范
• expires：明确设置Cookie过期时间，避免被浏览器视为会话Cookie（关闭浏览器即失效）
• httpOnly: true：禁止前端JavaScript访问该Cookie，提升Cookie安全性，符合现代浏览器安全要求
• path: '/'：确保Cookie在整个站点的所有路径下都能被携带

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