Javascript 如何在NodeJs中成功获取API请求后呈现到新的HTML页面？

我想根据用户请求呈现一个新的HTML页面，只有在正确设置授权头的情况下才能访问该页面。我最初以为浏览器会重定向到页面，但后来发现情况并非如此。我已经找到了一些方法来处理这个问题，例如替换DOM，但我认为这不是一个好的解决方案

以下是UI的fetch调用，它返回HTML，但当前不呈现它：

fetch('/protected_route', {
  headers: {
    'authorization': 'Bearer ' + sessionStorage.getItem('token')
  }
}).then(response => {
  // What to do with the response
});

以下是服务器代码（如果有帮助）：

app.get('/protected_route', (req, res) => {
  const bearer = req.headers['authorization'];

  if(typeof bearer === 'undefined') {
    res.json({message: 'Not logged in'});
  }
  else {
    const token = bearer.split(' ')[1];

    jwt.verify(token, config.secret, (error, data) => {
      if(error) {
        res.json({message: 'Error verifying token'});
      }
      else {
        res.render('protected_route');
      }
    });
  }
});

---

您面临的问题是，当您试图打开一个新的HTML页面并通过res.render发回HTML文件时，这会将HTML内容发回请求。当通过AJAX或fetch或request或任何其他API客户端使用API调用时，它们是为单页应用程序开发的，这些调用禁止浏览器呈现到新的html页面。来自这些源的API调用处理数据，而浏览器无法控制收到的响应

如果您需要呈现另一个HTML页面，而不是使用FormSubmit来调用API，因为这是让浏览器根据响应进行操作并在新页面中显示响应的唯一方法。由于res.render返回HTML文件内容，因此一个新页面就像打开一个文件一样

若您想使用单页应用程序，那个么您必须处理响应中接收到的HTML，然后用新的HTML替换整个加载的HTML，若需要使用一些API调用模块，您必须在DOM中进行更改

---

对于初学者，您可以检查解释所有基本的前端和后端链接。

我找到的唯一解决方法是使用document.writedata。此语句导致呈现接收到的页面，但位于同一文档中，不会将浏览器窗口更改为新页面，也不会在浏览器历史记录中包含新的enter键

fetch运行HTTP请求，但其目的是在不离开当前页面的情况下与服务器通信。既然您正在手动处理授权，为什么不使用cookie呢？这样，您就可以在/protected_路由处理程序中检查cookie，然后只需使用允许用户移动到页面。@ChrisG感谢您的回答！实际上我没有考虑这个选择。我刚刚用window.location.href=path重定向了用户，它现在可以工作了。这些响应函数只能发送回数据，不能发送回html文件，这是很清楚的：服务器完全可以在这里发送回html文件，它甚至无法分辨AJAX请求和常规方式之间的区别。它所做的只是为请求提供端点。毫无意义地让浏览器导航到JSON文件，或者通过AJAX请求和处理HTML文件是完全可能的。res.render所做的是调用视图引擎，提供一个视图文件和可选参数，然后返回结果文件，通常是HTML。同样，用res.render响应AJAX请求是完全可能的，并且实际上是一个有用的实现。以上问题的任何答案都必须包括的重要一点是，在使用JS进行编程导航时，fetch是不合适的。如果您需要呈现另一个html页面，而不是使用form submit调用API，因为这是让服务器呈现到其他页面的唯一方法否，可以使用location.href=url；去别处航行。另外，服务器只提供回复。浏览器是否呈现它取决于请求是如何发出的，而不是服务器端代码使用的命令。这就是我一直试图说的，这些函数不允许浏览器显示服务器提供的响应，并充当处理数据的中间件。我们必须在DOM中进行更改，以反映HTML的更改，我们可以用响应中提供的HTML追加、替换旧的HTML。对不起，您的回答包含几个明显错误的陈述，并且非常容易误导。在我的书中，它向您展示了如何使用您引用的命令，但您并不真正理解所涉及的过程。OP将它标记为已接受，可能没有真正阅读它，但它应该被编辑或删除。