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

Question

我正在从客户端向我的node/express应用程序中的路由发出GET请求，可能我错过了一些非常明显的东西，但我的应用程序停留在路径localhost:5000上，没有转到localhost:5000/adminPortal，并按照/adminPortal GET路由中的express res.render((渲染视图。我已经坚持了三天了，我相信这是非常明显的。。。也许XMLhttp请求不是正确的方式？我需要使用什么来将标头(授权(传递到快速路由，以便它转到链接并呈现视图？这是客户端代码：

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来处理响应。