XHR Get请求不会从Express应用加载加载的HTML字符串

如何解决XHR Get请求不会从Express应用加载加载的HTML字符串

我正在构建我的第一个Express应用程序。 到目前为止，我所有来自前端的请求均由GET请求的锚元素和POST请求的元素触发。来自服务器的所有响应均使用表达函数res.render（）或res.redirect（）生成。

现在，我正在尝试使用json网络令牌和localStorage实施用户身份验证。用户登录后，我将在后端生成令牌并将其发送到前端，如下所示：

 res.render('loggedIn',{token: token});

然后我将此令牌保存在localStorage中（在pug模板中）：

 const token = !{JSON.stringify(token)};
 window.localStorage.setItem('token',token);

到目前为止，一切都很好，但是现在我必须将令牌发送回后端-从我阅读的内容来看，将令牌包含在请求标头中可以很直接地做到这一点。但是，由于我的请求仅通过锚元素发出，因此我现在必须对自己的“自定义”请求做出正确的请求？

因此，使用XMLHttpRequest，我的代码是：

function sendGetWithAuth(endUrl) {
    return new Promise((resolve,reject) => {
        let request = new XMLHttpRequest();
        request.open('GET',endUrl);
        request.onreadystatechange = () => {
            if (request.readyState === 4){
                resolve(request.response);
            }
        }
        request.setRequestHeader('x-auth-token',window.localStorage.getItem('token'));
        request.send();
    });
}

我没有使用锚元素，而是在目标上设置了一个click事件监听器：

target.addEventListener('click',() => {
    const endUrl = '/job/6789'
    sendGetWithAuth(endUrl).then(
            (response) => {
                console.log(response);
            }
    )
});

当我返回浏览器时，单击XHR请求发送正常的目标，标头包含我的令牌，响应有效负载包含res.render（）发送的HTML，但是在页面上什么也没有发生，我仍然位于我单击目标的同一页面上，并且尚未重定向到请求的页面。请求的状态为： [HTTP / 1.1 304未修改1ms]

（当我的目标是链接<a href='/job/6789'>TARGET </a>时，它可以正常工作（我被重定向到/ job / 6789页面。（但没有使用anchor元素设置标题））。

我的第一个问题是：在XHR GET请求之后，如何在浏览器中加载HTML字符串和响应？

[编辑30-10-2020] 我的新问题是： XHR GET和最终URL与到同一最终URL的链接（带有定位标记）的区别是什么。

是否可以放置一个“自定义”请求，该请求将重定向到请求的末尾网址？

我尝试在放置XHR GET请求之后（在同一事件处理程序中）添加window.location = endUrl。它放置了XHR GET，然后将我重定向到endUrl，但是我在途中丢失了令牌。

（在浏览器的控制台中，我看到XHR GET endUrl，然后“浏览器导航到：/ endUrl”，然后是另一个GET endUrl（由我假设的重定向导致，但它覆盖了XHR请求的标头），因此我进入了请求的页面，但没有我的令牌。

解决方法

使用localStorage对于前端应用程序效果很好，但是对于您而言，最好使用Cookie。通过在expressjs路由处理程序中调用res.cookie(<name>,<value>,<options>)来植入cookie，然后安装npm软件包cookie-parser，对其进行要求，将其用作应用程序的中间件，然后您可以在其中使用req.cookies.<name>您的工作路线处理程序。通过这种方法，您可以使用直接转到该URL的锚。