javascript - XMLHttpRequest() 不会从我的 node.js/express 渲染 View ？

Question

我正在从客户端向我的 Node/express 应用程序中的路由发出 GET 请求，也许我错过了一些非常明显的东西，但我的应用程序保留在路径 localhost:5000 上，并且不会转到 localhost:5000/adminPortal 和根据/adminPortal GET 路由中的快速 res.render() 渲染 View 。我已经在这个问题上坚持了 3 天了，我确信这是非常明显的......也许 XML http 请求不是正确的方法？我需要使用什么来将 header (授权)传递到快速路由以使其链接并呈现 View ？这是客户端代码:

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() 中传递的 header 中的 token 的中间件:

//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 以对响应执行某些操作。