XMLHttpRequest () не отображает представление из моего node.js / express?

Question

Я делаю GET-запрос к маршруту в моем приложении node / express со стороны клиента, возможно, мне не хватает чего-то очень очевидного, но мое приложение остается на пути localhost: 5000 и не переходит на localhost: 5000 / adminPortal иотобразить представление в соответствии с выражением res.render () в GET-маршруте / adminPortal. Я застрял на этом в течение 3 дней, и я уверен, что это очень очевидно ... Возможно, запрос HTTP 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 в обработчике загрузки, чтобы что-то сделать с ответом.