XMLHttpRequest() 不从我的 node.js/express 呈现视图？

Question

我正在从客户端向我的 node/express 应用程序中的路由发出 GET 请求，也许我遗漏了一些非常明显的东西，但我的应用程序停留在路径 localhost:5000 上并且没有转到 localhost:5000/adminPortal 并呈现视图根据 /adminPortal GET 路由中的 express res.render()。我已经坚持了 3 天了，我确定这很明显……也许 XML http 请求不是正确的方法？我需要使用什么来将标头（授权）传递给快速路由以使其链接并呈现视图？这是客户端代码：

firebase.auth().onAuthStateChanged(function(user) {

    console.log("Auth state changed");

    //console.log("verified: " + user.emailVerified);

    if(user){ 

        firebase.auth().currentUser.getIdToken().then(function(token){

            console.log('Sending request to with ID token in Authorization header.');

            var req = new XMLHttpRequest();

            req.open('GET', '/adminPortal', true);

            req.setRequestHeader('Authorization', 'Bearer ' + token);

            req.responseType = "document";

            req.send();

        }).catch(function(error){

            console.log("error:" + error);

        });

    }

在我的服务器端转到这条路线（通过中间件后）：

router.get('/',isLoggedInAsUser, (req, res) => {

  let usersRef = db.collection('Users');

  var ownPolls = [];

  var allUsers = [];

  let firebaseUsers = usersRef.get()

  .then(snapshot => {

    snapshot.forEach(user => {

      console.log(user.id, '=>', user.data());

      allUsers.push(user.data());

    });

    console.log("test");

    res.render('adminPortal/index', {allUsers: allUsers});

    return null;

  })

  .catch(err => {

    console.log('Error getting documents', err);

  });  

});

Answer 1

如果单击链接，则浏览器会发出 HTTP 请求并将结果加载为新页面。如果您提交表单，则浏览器会发出 HTTP 请求并将结果加载为新页面。如果您使用 ，<img>则浏览器发出 HTTP 请求并将结果作为图像加载到当前文档中由<img>元素标记的位置。如果您使用，XMLHttpRequest则浏览器发出 HTTP 请求并将结果返回给 JavaScript，它将存储在 XHR 对象中：const xhr = new XMLHttpRequest();xhr.open('GET', '/adminPortal', true);xhr.addEventListener("load", function () {&nbsp;&nbsp; &nbsp; alert(this.responseText);&nbsp;});xhr.send();XHR的全部意义在于它允许 JavaScript 通过 HTTP 与服务器通信，而无需加载新页面。如果要导航到新页面，请使用链接或表单，或为 分配新值location.href。如果您想使用 XHR，请在加载处理程序中编写 JavaScript 以对响应执行某些操作。