Next.js+Axios+Node环境SSR阶段无法删除HttpOnly Cookie

Cookie删除失败和CORS配置、clearCookie写法没有直接关系，核心是Next.js服务端渲染生命周期的执行环境和预期不一致：

• getServerSideProps/getStaticProps/getInitialProps全部运行在Next.js的Node.js服务端runtime，不是用户浏览器环境
• 你在这些函数里用Axios调用登出接口时，请求链路是「Next服务端 → Express网关」，你手动塞到请求头里的Cookie，是Next服务端从用户发来的请求里复制的
• Express网关执行clearCookie生成的Set-Cookie响应头（删除Cookie的指令），只会返回到Next服务端的Axios响应对象里，如果不手动处理，这个头根本不会被转发到用户浏览器
• 浏览器自始至终没收到删除token/refresh这两个Cookie的指令，自然会一直保留Cookie存储
• 你在客户端组件的点击事件里调接口能正常删Cookie，是因为请求直接由浏览器发起，浏览器能直接收到Set-Cookie头并执行删除；Postman调用能成功是因为Postman本身就是请求发起方，会自己处理收到的Set-Cookie逻辑，和浏览器场景不具备可比性。

另外要提前排查一个隐性问题：调用res.clearCookie时，传入的配置必须和你当初设置Cookie时的path、domain、secure、sameSite属性完全一致，否则就算Set-Cookie头到了浏览器，也会因为属性不匹配无法匹配到目标Cookie，导致删除失败。

你可以根据业务场景二选一：

方案1：服务端触发登出时透传Set-Cookie头 #

如果必须在服务端渲染生命周期里触发登出，需要把Express接口返回的Set-Cookie头，通过Next上下文的响应对象透传给用户浏览器，参考代码：

export const getServerSideProps = async (ctx) => {
  const logoutRes = await axios({
    method: "GET",
    url:"http://localhost:3001/cibest-admin/logout",
    headers: ctx.req.headers.cookie ? { cookie: ctx.req.headers.cookie } : undefined,
    withCredentials: true
  })
  // 透传删除Cookie的响应头给浏览器
  const setCookieHeaders = logoutRes.headers['set-cookie'];
  if (setCookieHeaders) {
    ctx.res.setHeader('Set-Cookie', setCookieHeaders);
  }
  // 登出后可按需重定向到登录页
  return {
    redirect: {
      destination: '/login',
      permanent: false,
    },
  }
};

同时补全Express侧clearCookie的配置，和种Cookie时保持一致：

// 所有属性必须和res.cookie设置token/refresh时的参数完全相同
const cookieClearConfig = {
  path: '/',
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production',
  sameSite: 'lax'
  // 如果设置Cookie时传了domain参数，这里必须加完全一致的domain值
}
res.clearCookie('token', cookieClearConfig)
res.clearCookie('refresh', cookieClearConfig)

方案2：登出逻辑放到客户端侧执行 #

这是实现成本更低的方案：不要在服务端渲染生命周期里调用登出接口，要么放到客户端组件的挂载钩子、用户交互事件里发起请求，要么在getServerSideProps判断需要登出时，直接重定向到客户端登出页，由浏览器直接发起登出请求，和你现有Navbar按钮的登出逻辑一致，不需要额外处理响应头透传。

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