Node.js应用登出功能异常：接口正常但无法清除Cookie

问题描述 #

我的Node.js应用登出功能完全失效：后端logout接口能被成功调用（添加console.log()可正常输出），但始终无法清除accessToken Cookie，Cookie数量无变化。尝试过使用destroy方法、改用GET请求、修改Cookie名称、设置maxAge为0等方案，均未解决问题。

相关代码如下：

前端登出请求代码 #

const handleLogout = () => {
    axios
      .post("http://localhost:8800/api/auth/logout")
      .then(() => {
        toast.success("Logout Sucess!");
        // navigate("/");
      })
      .catch((error) => {
        console.error(error);
      });
  };

后端logout接口代码 #

export const logout = (req, res) => {
  res
    .clearCookie("accessToken", {
      httpOnly: true,
      secure: true,
      sameSite: "none",
    })
    .status(200)
    .json("Logout successful!");
};

路由配置 #

router.post("/logout", logout);

解决方案 #

1. 严格匹配Cookie参数 #

清除Cookie时，必须和设置该Cookie时的所有参数完全一致，否则无法匹配到目标Cookie：

• secure: true仅在HTTPS环境生效，本地开发用HTTP（localhost默认）时，该参数会导致清除失败，需改为false（生产环境再改回true）。
• 若设置Cookie时指定了path（比如path: '/'），清除时必须添加相同的path参数。
• sameSite参数要和设置时一致，none必须配合secure: true使用，本地开发建议改为Lax。

2. 前端开启跨域Cookie携带 #

跨域请求时，axios需要开启withCredentials: true，否则Cookie无法被后端正确操作。

修改后的代码示例 #

后端代码

export const logout = (req, res) => {
  const isProduction = process.env.NODE_ENV === 'production';
  res
    .clearCookie("accessToken", {
      httpOnly: true,
      secure: isProduction,
      sameSite: isProduction ? "none" : "Lax",
      path: '/' // 确保和设置Cookie时的path一致
    })
    .status(200)
    .json("Logout successful!");
};

前端代码

const handleLogout = () => {
    axios
      .post("http://localhost:8800/api/auth/logout", {}, { withCredentials: true })
      .then(() => {
        toast.success("Logout Sucess!");
        // navigate("/");
      })
      .catch((error) => {
        console.error(error);
      });
  };

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