React+Node.js应用删Cookie后重登无法存储Cookie及history.ts警告问题排查

关于 history.ts:649 警告 #

在仅维护一个会话历史条目的简易会话历史上下文使用history.pushState，将被视为history.replaceState。

这个警告的核心原因是你当前使用的会话历史实现（比如React Router的memoryHistory或自定义的单条目历史对象）仅支持维护1条历史记录。当调用history.pushState()时，由于没有多余空间添加新条目，底层会自动改用history.replaceState()覆盖当前条目。

若要消除该警告，直接将代码中的history.pushState()替换为history.replaceState()即可，不会影响业务逻辑执行。

登录后无法重新存储Cookie的问题排查与解决 #

后端(Node.js)侧排查点 #

• 删除Cookie逻辑校验：删除Cookie时必须与设置Cookie时的Path、Domain、HttpOnly、Secure属性完全一致，否则无法成功删除残留Cookie，可能导致新Cookie无法覆盖存储。
  Express框架下正确删除Cookie的示例代码：

  res.clearCookie('sessionId', {
    path: '/',
    domain: '.yourdomain.com', // 需与设置时的域名一致
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production'
  });
  

• 登录接口Set-Cookie头校验：检查登录接口响应头中是否正确返回Set-Cookie字段，且属性配置合理：
  • 生产环境需开启secure: true（仅HTTPS传输）
  • 推荐设置SameSite: 'Lax'或'Strict'，避免跨域拦截
  • 明确设置Max-Age或Expires，避免默认会话Cookie在浏览器关闭后失效
• 跨域配置校验：若前后端存在跨域，需确保：
  • 后端响应头添加Access-Control-Allow-Credentials: true
  • 后端Access-Control-Allow-Origin设置为具体前端域名（不能用*）

前端(React)侧排查点 #

• 删除Cookie代码校验：前端手动删除Cookie时，需匹配设置时的属性：

  document.cookie = "sessionId=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT; Domain=.yourdomain.com";
  

• 登录请求凭证配置：确保登录请求携带凭证信息：
  • Axios配置示例：

    axios.post('/api/login', userData, { withCredentials: true });
    

  • Fetch配置示例：

    fetch('/api/login', {
      method: 'POST',
      credentials: 'include',
      body: JSON.stringify(userData)
    });
    

• 浏览器Cookie状态检查：打开浏览器开发者工具（Application -> Cookies），确认：
  • 登录后的删除操作是否真的清除了目标Cookie
  • 登录请求的响应头中Set-Cookie是否存在，且未被浏览器标记为拦截（可在Network面板查看请求详情）

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