javascript - 登录系统在 Postman 中正常工作，但在浏览器中不正常

Question

这是我的路由器

 router.post("/login", async (req, res) => 
    {
        try
        {
            const user = await User.findByCredentials(req.body.email, req.body.password)  
            // console.log(user)
            const token = await user.generateAuthToken()
            // console.log(token)
            res.redirect("/takvim")
        }
        catch(e)
        {
            res.status(400).redirect("/")
        }
    })

这是我在上面的函数中使用的用户模型

UserSchema.methods.generateAuthToken = async function () 
{
    const user = this
    const token = jwt.sign({_id: user._id.toString()}, "secret")
    user.tokens = user.tokens.concat({token})
    await user.save()
    return token
}

UserSchema.statics.findByCredentials =  async function (emails, passwords)
{    
  const user = await User.findOne({email: emails})
  console.log(user)
  const isMatch = await bcrypt.compare(passwords, user.password)
  if(!isMatch)
  {
    throw new Error("unable to login")
  }
  return user   
}

我正在使用按钮从前端发出请求

$uyeolForm.addEventListener("submit", () => 
{
    if(!$uyeolFormEmail.value.includes(".com"))
    {
       return $uyeolFormHata.innerHTML = "email geçersiz" 
    }
    const xhr = new XMLHttpRequest();
    let form = JSON.stringify({
    email: $uyeolFormEmail.value,
    password: $uyeolFormPassword.value
    });
    xhr.open("POST", "/login")
    xhr.setRequestHeader('Content-type', 'application/json')
    xhr.send(form);
})

问题是当我使用 postman 时，应用程序将我重定向到我想要的页面并且没有给出错误。当我使用按钮发送请求时，它仍然会找到用户，但它不会将我重定向到我期望的页面，并且在控制台中我看到了用户(预期)和 null 这不是预期的。

谢谢大家。

Answer 1

当 submit 时，您正在使用 XMLHttpRequest 发出 HTTP 请求事件已触发，但您并未阻止表单提交的默认行为。

因此 XMLHttpRequest 对象被创建并发出请求，然后立即(并且可能取消请求取决于事情进展的速度)<form>提交到 action 中指定的 URL .

您说端点被命中两次，一次是在您获得预期用户的地方，一次是在您没有的地方。

当您获得用户时，您期望它来自 XHR 提交。

如果你不这样做，那是来自常规表单提交(它不会被 JSON 编码，因为 HTML 表单不支持 JSON 编码，所以它找不到用户，因为它没有解码数据表格正确)。

---

既然您说过要重定向，请不要使用 Ajax。 Ajax 是一种在不离开当前页面的情况下发出 HTTP 请求的方法。

更改服务器端代码以接受 <form> 格式的数据正在对其进行编码(可能是 application/x-www-form-urlencoded，除非您使用 enctype 属性更改了它)。