res.sendFile 被中止，将我发送到 localhost:XXXX/?

Question

正如我从 console.logs 中知道的那样，我有一个正在访问的路由设置。但是，最后的 res.sendFile 并没有将其带到正确的位置。它会将我发送到 localhost:XXXX/?。

这是路线：

router.get('/bidder', async (req, res) => {
  console.log('GET /bidder')
  console.log(req.session.user_id)
  
  try {
    const userData = await User.findByPk(req.session.user_id, {
      attributes: { exclude: ['password'] },
      include: [
        { 
          model: Project,
          attributes: ['project_name'],
          through: Bid,
          as: 'project_users'
        }
      ],
    });

    console.log(path.join(__dirname, '/../public', '/bidder.html'))
    res.sendFile(path.join(__dirname, '/../public', '/bidder.html',), function (err) {
      if (err) {
        console.log(err)
      }
    })
  } catch (err) {
    console.log(err)
    res.status(500).json(err);
  }
});

这是让我到达上面 /bidder 路线的路线：

router.post('/login', async (req, res) => {
  console.log('POST /login');
  try {
      const user = await User.findOne({ where: { email: req.body.email } });

      if (!user) {
          res
              .status(400)
              .json({ message: 'Incorrect email or password, please try again.' });
          return;
      }

      const validPassword = await user.checkPassword(req.body.password);

      if (!validPassword) {
          res
              .status(400)
              .json({ message: 'Incorrect email or password, please try again.' });
          return;
      }

      req.session.save(() => {
        console.log(user);
        console.log(user.id);
        console.log(user.is_poster);
        
        req.session.user_id = user.id;
        req.session.is_poster = user.is_poster;
        req.session.logged_in = true;
        
        console.log(req.session.logged_in)
        
        if (req.session.is_poster == false) {
          console.log('---------------------------')
          console.log(req.session.is_poster)
          console.log(path.join(__dirname, '/../public/bidder.html'))
          
          res.redirect('/bidder')
        } else if (req.session.is_poster == true) {
          console.log('---------------------------')
          console.log(req.session.is_poster)
          console.log(path.join(__dirname, '/../public/poster.html'))
          
          res.redirect('/poster')
        } else {
          console.log('not logged in')
          
          res.redirect('/')
        }
      });

  } catch (err) {
    console.log(err);
    res.status(404).end();
  }
});

它记录的错误是：

Error: Request aborted
    at onaborted (C:\Users\camer\Desktop\homework\project-bid-board\node_modules\express\lib\response.js:1025:15)
    at Immediate._onImmediate (C:\Users\camer\Desktop\homework\project-bid-board\node_modules\express\lib\response.js:1067:9)
    at processImmediate (internal/timers.js:464:21) {
  code: 'ECONNABORTED'
}

如果我只是在浏览器中输入 localhost:XXXX/bidder，它会将我发送到正确的 html 页面，这是应该的。

编辑 这是与提交登录数据相关的JS：

$('#login-button').on('click', function(event) {
    event.preventDefault();
    
    var email = $('#login-email').val()
    var password = $('#login-password').val()

    loginUser(email, password)
})

const loginUser = async (email, password) => {
    const response = await fetch (`/api/user/login`, {
        method: 'POST',
        body: JSON.stringify({ email, password }),
        headers: { 'Content-Type': 'application/json' },
    })

    console.log(response.statusText)
}

这是它正在处理的形式：

                  <form>
                    <div>
                        <label for="username">E-mail / Username:</label>
                        <input class="text-input" id="login-email" type="text" placeholder="me@example.com" />
                    </div>
                    <div>
                        <label for="password">Password:</label>
                        <input class="text-input" type="text" id="login-password" placeholder="password"></input>
                    </div>
                    <section>
                        <button class="btn-lg btn-block" id="login-button">Login</button>
                        <div class="text-center" id="signupSuccessMsg"></div>
                    </section>
                </form>

Answer 1

您在 Javascript 中发布 /login 和 fetch()。 fetch() 本身不会改变浏览器窗口中的任何内容 - 即使响应是重定向。

相反，fetch() 向您的服务器发出 http 请求并获取响应并将其传递给您的 Javascript。完全由您的 Javascript 来决定如何处理该响应。如果您想跟随重定向，那么您必须编写 Javascript 以从 fetch() 调用中查找 3xx 响应状态，获取 location 标头，然后将 window.location 设置为该新 URL。这将导致浏览器转到该新页面。

---

由于您发布登录表单的 Javascript 似乎没有做任何特别的事情，您可以删除您的 Javascript 并让浏览器自行发布表单，并确保您的服务器被编程为接受表单的方式如果直接由浏览器发布，将被编码。然后，浏览器会自动跟随重定向响应，或者显示帖子返回的任何内容。