bcrypt.compare 无法在 nextjs 中设置响应标头

Question

当我的代码进入 bcrypt.compare 时，我似乎无法获得正确的响应标头。一开始我以为是cors问题，但如果输入错误并显示“用户不存在”，我仍然会得到正确的响应。

这是我在 express 中的 api 服务器端代码

router.post("/api/signIn", (req, res) => {
  const { user, password } = req.body;
  const queryString = "SELECT * FROM users WHERE user_id = ?";
  db.query(queryString, [user])
    .then(result => {
      if (result.length > 0) {
        const hash = result[0].password;

        //here bcrypt.compare works server side or with cURL but won't set the response headers in the browser

        bcrypt
          .compare(password, hash)
          .then(same => {
            if (same === true) {
              console.log("correct password");
              res.status(200).json({
                code: 200,
                message: "correct password"
              });
            } else {
              res.status(401).json({
                code: 401,
                message: "incorrect password"
              });
            }
          })
          .catch(err => console.log(err));
      } else {

      //this one works though and i can get the response in the browser so it can't be a cors issue

        console.log("user does not exist");
        res.status(200).json({
          code: 401,
          message: "User does not exist"
        });
      }
    })
    .catch(err => {
      console.log("error" + err.message);
    });
});

这是我在 react 中使用的测试函数

  const signIn = () => {
    fetch("http://localhost:5000/api/signIn", {
      method: "POST",
      body: JSON.stringify({
        user: userName,
        password: password
      }),
      headers: {
        "Content-Type": "application/json"
      },
    })
      .then(res => res.json())
      .then(response => alert(response.code + response.message))
      .catch(err => alert(err));
  };

因此，如果我输入了错误的用户名，而该用户名不在数据库中，则会显示警报功能（code401User 不存在）但如果我输入了正确的用户 bcrypt.compare() 似乎不会为两者设置响应正确和不正确的密码，我会得到（TypeError：无法获取）。但是在 cURL 中测试 api 是可行的。

Answer 1

知道了，我忘了把 event.preventDefault() 放在 fetch 函数上。