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);
  });  
});

这是检查我在 XMLHTTPrequest() 中传递的标头中的令牌的中间件：

//Check if request is from User account
    isLoggedInAsUser: async function(req, res, next){
        if (req.headers.authorization && req.headers.authorization.startsWith('Bearer ')) {
            console.log('Found "Authorization" header');
            // Read the ID Token from the Authorization header.
            idToken = req.headers.authorization.split('Bearer ')[1];
            try {
            const decodedToken = await admin.auth().verifyIdToken(idToken);
            if(decodedToken){
                req.body.uid = decodedToken.uid;
                console.log("The decoded token: "+ decodedToken.uid);
                next();
                } else{
                    return res.status(401).send("You are not autheeeroized");
                }
            } catch (e){
                return res.status(401).send("You are not authroized" + e);
            }
          }

Answer 1

如果您单击链接，则浏览器会发出 HTTP 请求并将结果作为新页面加载。

如果您提交表单，则浏览器会发出 HTTP 请求并将结果作为新页面加载。

如果您使用 <img>，则浏览器会发出 HTTP 请求并将结果作为图像加载到当前文档中由 <img> 元素标记的位置。

如果您使用XMLHttpRequest，那么浏览器会发出一个 HTTP 请求并将结果返回给 JavaScript，然后将其存储在 XHR 对象中：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/adminPortal', true);
xhr.addEventListener("load", function () { 
    alert(this.responseText); 
});
xhr.send();

XHR重点在于它允许 JavaScript 通过 HTTP 与服务器通信而无需加载新页面。

如果您想导航到新页面，请使用链接或表单，或为location.href 分配一个新值。

如果你想使用 XHR，那么在负载处理程序中编写 JavaScript 来处理响应。