Next.js API路由如何移除Cookie？登录登出场景问题排查

嘿，我来帮你搞定这个Cookie移除的问题！你的登出代码里用res.removeHeader('Set-Cookie')是没用的——这个操作只是移除当前响应里的Set-Cookie头，但浏览器已经存储的Cookie不会被触发删除，所以刷新后依然能看到它们。

正确的Cookie移除方式 #

要让浏览器删除Cookie，你需要主动向浏览器发送一个带有过期属性的Set-Cookie指令，告诉浏览器这个Cookie已经失效了。具体来说，要和登录时设置Cookie的参数保持一致（比如path），然后设置expires为过去的时间，或者maxAge: 0。

修改后的登出API代码 #

import { serialize } from 'cookie';

export default async (req, res) => {
  // 为每个要删除的Cookie生成过期的Set-Cookie指令
  res.setHeader('Set-Cookie', [
    serialize('mytoken1', '', {
      path: '/',
      expires: new Date(0), // 设置为过去的时间，触发浏览器删除
    }),
    serialize('mytoken2', '', {
      path: '/',
      expires: new Date(0),
    }),
  ]);

  res.writeHead(302, { Location: '/api/login' });
  res.end();
}

关键注意事项 #

• 必须保证删除Cookie时的参数（path、domain、secure、httpOnly等）和登录时设置的完全一致，否则浏览器会忽略这个删除指令。比如如果登录时你设置了secure: true，那登出时也要加上这个参数。
• 除了expires: new Date(0)，你也可以用maxAge: 0来达到同样的效果，二者选其一即可。

这样修改后，当用户访问登出API时，浏览器收到这两个过期的Cookie指令，就会自动删除对应的mytoken1和mytoken2了，刷新页面后就看不到它们啦。

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