使用fetch发起POST注册请求后无法实现页面跳转该如何解决

你遇到的问题根源是表单的默认提交行为覆盖了你的自定义JS逻辑。你绑定点击事件的按钮是type="submit"类型，且放在<form>标签内部，点击后浏览器会优先执行默认的表单提交动作：直接向form标签action属性指定的地址发起POST请求并跳转页面，根本不会等你写的fetch请求执行完成，所以fetch回调里的跳转逻辑、console打印都没有机会触发。

解决方法 #

1. 阻止表单默认提交行为，这是最核心的步骤。推荐优先监听form的submit事件而非按钮的click事件，同时阻止默认行为，还能复用浏览器自带的表单必填项校验能力：
   首先给你的form标签添加id属性方便选中：

<form id="registerForm" action="http://localhost:3000/register" method="POST">
<!-- 其余表单内容保持不变 -->
</form>

然后修改你的JS代码如下：

const registerForm = document.getElementById('registerForm')
registerForm.addEventListener('submit', async (e) => {
    // 阻止浏览器默认表单提交跳转
    e.preventDefault()
    const url = 'http://localhost:3000/register'
    // 补充获取表单输入内容，你原代码中未定义data变量，这里要手动取值
    const data = {
        login: document.getElementById('login').value,
        password: document.getElementById('password').value,
        password2: document.getElementById('password2').value
    }
    try {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        const resData = await response.json()
        if (resData.success) {
            window.location.href = resData.url
        } else {
            document.getElementById('message').textContent = resData.message
            window.location.href = resData.url
        }
    } catch (err) {
        document.getElementById('message').innerHTML = err
    }
})

2. （可选）你也可以将提交按钮改为普通button类型，从根源避免触发默认提交，不过还是建议配合上面的阻止默认行为的方式使用，兼容性更好：

<!-- 把原来的submit类型输入框改成普通button -->
<button id="post-btn" type="button">Register</button>

额外注意事项 #

• 你原代码中fetch配置的redirect: 'manual'在这里没有作用，你已经自己处理前端跳转逻辑，可以直接删掉这个配置。
• 要确认你后端返回的/client/components/login/login.html路径是正确的，是相对于站点根目录的绝对路径，如果是相对路径注意不要和当前页面路径拼接错误。

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