调用logout接口后页面未跳转问题求助（Node.js+Fetch场景）

清除Cookie操作已成功，但重定向到登录页面的操作未生效。相关代码如下：

后端（index.js）代码 #

router.post("/logout",(req,res)=>{
    res.clearCookie("access_token").redirect("/login")
})

前端（EJS文件）代码 #

<button class="asdasd">Logout Button</button>
<script>
    const btn=document.querySelector(".logoutButton")
    btn.addEventListener("click",()=>{
        fetch("http://localhost:8000/logout", {
            method : "POST"
        })
    })
</script>

问题原因 #

• 按钮类名不匹配：按钮的class是asdasd，但JS选择器用的是.logoutButton，导致点击事件无法绑定，请求根本发不出去。
• Fetch特性限制：即使请求正常发送，Fetch API默认不会自动处理服务器返回的重定向响应，仅会接收响应数据，不会触发页面跳转。

解决方案 #

第一步：修复按钮类名匹配问题 #

将按钮的class改为logoutButton，或修改JS选择器为.asdasd，确保事件能正确绑定：

<button class="logoutButton">Logout Button</button>
<script>
    const btn=document.querySelector(".logoutButton")
    btn.addEventListener("click",()=>{
        // 后续请求逻辑
    })
</script>

第二步：处理重定向逻辑（二选一） #

方案1：改用表单提交（自动处理重定向）

表单提交会自动遵循服务器的重定向响应，无需额外JS代码：

<form action="/logout" method="POST">
    <button type="submit" class="logoutButton">Logout Button</button>
</form>

后端代码保持不变即可。

方案2：保留Fetch，手动触发跳转

在Fetch请求成功后，通过JS手动跳转到登录页面，同时需添加credentials: "include"确保Cookie被正确清除：

<button class="logoutButton">Logout Button</button>
<script>
    const btn=document.querySelector(".logoutButton")
    btn.addEventListener("click",async ()=>{
        const response = await fetch("http://localhost:8000/logout", {
            method : "POST",
            credentials: "include"
        })
        if(response.ok){
            window.location.href = "/login"
        }
    })
</script>

内容的提问来源于stack exchange，提问作者Md Irfan Rahman Mubin