为什么 fetch 没有达到指定的 url？

Question

...
const userIcon = document.querySelector('.user-icon');

userIcon.addEventListener("click", () => {
            if (token) {
                fetch('/privatearea', {
                    headers: {
                        'authorization': `Bearer ${token}`
                    }
                }).catch(err => console.log(err));
            } else {
                window.location.assign('/login');
            }
...

我想做的是：

如果“token”存在，单击元素“userIcon”时，我想获取 url“http://localhost:3000/privatearea”。
如果令牌不存在，则到达 url“http://localhost:3000/login”。

...
router.get('/privatearea', authenticateToken, (req, res) => {
    res.render("private-area");
});
...

后台已经用node js和express搞定了

因此，如果我单击该元素，应该会到达 url“http://localhost:3000/privatearea”并且应该呈现页面“private-area”。

但这并没有发生。我不需要回复，但我会通过设置一些 headers.

来达到 url

Answer 1

fetch() 本身不会在浏览器中呈现任何内容。它只是 returns 内容返回给您的 Javascript。因此，如果您在 fetch() 调用上有一个 .then() 处理程序，您只需从服务器上的 res.render("private-area"); 取回呈现的数据。

userIcon.addEventListener("click", () => {
    if (token) {
        fetch('/privatearea', {
            headers: {
                'authorization': `Bearer ${token}`
            }
        }).then(data => {
            // here you will see the result of res.render("private-area"); 
            //   on your server
            console.log(data);
        }).catch(err => console.log(err));
    } else {
        window.location.assign('/login');
    }
    ...
}

因此，您的使用方式并不是 fetch() 的正确设计。由于您没有在此处显示此功能的更大上下文，因此尚不完全清楚此处最好的 architecture/solution 是什么。以下是一些选项：

您可以从上面显示的 .then() 处理程序中获取 data 并使用您自己的 Javascript.
您可以 window.location = '/privatearea'; 并找到其他方式将 Bearer 令牌传递给您的服务器（也许之前对您服务器的调用设置了会话 cookie），这样您的服务器就可以使用会话 cookie 来验证允许浏览器输入 /privatearea.
您可以将您的身份验证模型切换为对浏览器 URL 更友好的模型（例如 session/cookie），因为您不能使用来自 URL 的 Bearer Token进入浏览器栏，因为它们只能在 Javascript 中使用。用户登录，在您的服务器上分配一个会话 cookie 和 URL 处理程序 URLs 从浏览器检查。

为什么 fetch 没有达到指定的 url？

Why doesn't fetch reach the specified url?

url

fetch

http-headers

node.js

express

我想做的是：