如何在NodeJs中成功获取API获取请求时呈现到新的HTML页面？-电脑我帮您

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

这是来自UI的提取调用，它返回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使用API调用或获取或请求或任何其他API客户端时，它们是为单页面应用程序开发的，这些调用禁止浏览器呈现到新的html页面。来自此类源的API调用处理数据，浏览器无法控制收到的响应。

如果您需要渲染另一个HTML页面而不是使用form-submit来调用API，因为这是让浏览器对响应起作用并在新页面中显示响应的唯一方法。由于res.render()返回了HTML文件内容，因此打开了一个像文件一样的新页面。

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

您可以查看this github project，了解所有基本的前端和后端链接。