Next.js项目使用react-cookie时自动生成额外Cookie引发400错误求助

问题定位 #

你在使用react-cookie管理会话时，仅通过代码设置了token Cookie，但登录场景下偶尔会生成额外的authenticated=true Cookie，叠加后触发「400 Bad Request - Request Header or Cookie Too Large」错误。

排查方向 #

• 检查后端响应：登录接口的响应头是否包含Set-Cookie: authenticated=true？fetch请求默认会自动保存后端返回的Cookie，这很可能是冗余Cookie的来源。
• 排查依赖/中间件：检查项目中是否引入了Next.js auth类库（如next-auth）、路由中间件，这类工具可能会自动注入会话标识Cookie。
• 排除浏览器扩展干扰：切换到隐身模式测试，排除调试、安全类扩展注入Cookie的可能。

解决方法 #

1. 删除冗余Cookie
   确认authenticated Cookie无业务价值后，可在登录完成后主动删除：

   removeCookie("authenticated", { path: "/" });
   

2. 优化Cookie总大小

   • 如果token本身过长，建议后端调整JWT payload，只保留必要字段（如用户ID），减少单Cookie体积；
   • 考虑将token改为HttpOnly Cookie存储（由后端设置），前端仅存储轻量标识，避免前端Cookie占用过多空间。

3. 验证效果

   • 登录后通过浏览器开发者工具「Application → Cookies」面板，确认仅存在token Cookie；
   • 查看登录请求的响应头，确认后端未额外设置authenticated Cookie；
   • 重复登录场景，验证冗余Cookie不再生成。

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