Next.js+Axios拒绝设置Cookie头却成功设置的问题求助

一、控制台两次提示拒绝设置Cookie但实际成功的原因 #

• 双重渲染引发重复请求：Next.js开发模式下会执行服务器端渲染（SSR）和客户端渲染（CSR）两次渲染流程，每次都会触发useEffect内的接口请求，两次请求都会触发Cookie校验逻辑，因此出现两次拒绝提示。其中某次请求符合Cookie设置规则，最终Cookie成功写入。
• 重复传递Cookie导致冲突：你同时开启了withCredentials: true（浏览器会自动携带当前域Cookie）和手动在请求头添加Cookie字段，这种重复传递会触发浏览器两次Cookie校验，进而产生两次拒绝日志。

修复方案 #

去掉请求头中手动添加的Cookie，依赖withCredentials: true自动携带即可：

axios.get("http://localhost:4000/api/auth/status", { withCredentials: true })

二、Sidebar组件props的user为undefined的原因 #

你在接口回调中错误地将初始状态的user传给了setUser，而非接口返回的data，导致user状态始终未更新为正确的用户数据：

// 错误写法
setUser(user);
// 正确写法
setUser(data);

额外优化 #

给useState设置明确的初始值，避免undefined带来的潜在问题：

const [user, setUser] = useState(null);

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