【发布时间】：2021-02-12 02:32:54
【问题描述】：
我正在构建我的第一个快递应用。 到目前为止，我来自前端的所有请求都是由 GET 请求的锚元素和 POST 请求的元素触发的。来自服务器的所有响应都是使用 express 函数 res.render() 或 res.redirect() 生成的。
现在我正在尝试使用 json web 令牌和 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();
});
}
我没有使用锚元素，而是在我的目标上设置了一个点击事件监听器：
target.addEventListener('click', () => {
const endUrl = '/job/6789'
sendGetWithAuth(endUrl).then(
(response) => {
console.log(response);
}
)
});
当我返回浏览器时，单击我的目标，XHR 请求发送正常，标头包含我的令牌，响应负载包含 res.render() 发送的 HTML，但页面上没有任何反应，我仍然在我单击目标的同一页面上，并且没有被重定向到请求的页面。请求的状态是：[HTTP/1.1 304 Not Modified 1ms]
（当我的目标是链接 <a href='/job/6789'>TARGET </a> 时，它工作正常（我被重定向到 /job/6789 页面。（但没有使用锚元素设置标题）。
我的第一个问题是：在 XHR GET 请求之后如何在浏览器中加载 HTML 字符串响应？
[编辑 30-10-2020] 我的新问题是：XHR GET 和结束 url 与同一个结束 url 的链接（带有锚标记）有何不同。
有没有办法放置一个“自定义”请求，将重定向到请求的结束 url？
我尝试在放置 XHR GET 请求后添加window.location = endUrl（在同一个事件处理程序中）。它放置 XHR GET 然后将我重定向到 endUrl 但我在途中丢失了我的令牌。
（在浏览器的控制台中，我看到 XHR GET endUrl，然后是“浏览器导航到：/endUrl”，然后是另一个 GET endUrl（由我假设的重定向引起，但它覆盖了我的 XHR 请求的标头）所以我登陆请求页面但没有我的令牌。
【问题讨论】：
-
.then( (response) => { return response; })等价于.then( r => r)。它什么也不做。您正在无处返回响应。您需要将响应传递给另一个函数。 -
您不需要自定义请求。使用饼干。这回答了你的问题了吗？ How to store jwt in cookie and pass it to authentication function when redirecting a page?
-
您只是将响应值返回到位空间，而是进行重定向。
-
快速说明：
window.localStorage可以缩短为localStorage。
标签： javascript node.js express http xmlhttprequest