res.sendFile()在浏览器中不渲染，请求技术协助排查

问题根源 #

你通过XMLHttpRequest发起首页请求后，没有对返回的HTML内容做渲染处理——浏览器不会自动渲染AJAX请求的响应结果，只会在你主动操作时才会更新页面；而Postman是直接展示响应内容，所以看起来正常，但浏览器里只是完成了请求流程，没有做任何页面更新。另外后端代码还有一处语法错误，可能导致错误无法被捕获。

具体修复方案 #

1. 替换AJAX请求为页面跳转（推荐方案）

登录成功后直接跳转首页，浏览器会自动加载并渲染页面，符合常规登录后跳转的逻辑：

// 替换原来的req2相关代码
if(this.readyState === 4 && req.status == 200) {
  // 保存token到cookie
  var obj = req.response.token;
  document.cookie = 'user_token=' + obj;
  console.log(document.cookie)

  // 直接跳转到首页，浏览器会自动处理页面渲染
  window.location.href = "http://localhost:4000/homepage";
}

注意：如果后端authorize()中间件是从Cookie中读取token验证，跳转时浏览器会自动携带Cookie，无需手动设置请求头。

2. 处理AJAX响应并渲染HTML（备选方案）

如果必须用AJAX请求首页，需要监听响应并将返回的HTML插入到当前页面：

var req2 = new XMLHttpRequest();
req2.open("GET", "http://localhost:4000/homepage", true);
req2.setRequestHeader("Authorization", 'Bearer ' + obj);

// 添加响应监听，处理返回的HTML
req2.addEventListener("readystatechange", function() {
  if(this.readyState === 4 && req2.status == 200) {
    // 替换当前页面的body内容
    document.body.innerHTML = req2.responseText;
    // 或者替换整个文档（更彻底）
    // document.open();
    // document.write(req2.responseText);
    // document.close();
  }
});
req2.send(); 

3. 修复后端语法错误

res.sendFile的回调函数位置写错了，逗号改为句点才能让错误捕获逻辑生效：

app.use('/homepage', authorize(), (req,res) => {
    res.sendFile('/homepage.html', {root: publicDir}, function(err) { 
        if (err) console.log(err);
    });
});

4. 跨域场景检查（若存在跨域）

如果前端页面域名和后端http://localhost:4000不一致，需确保后端正确配置CORS，允许携带Credentials和Authorization请求头。

内容的提问来源于stack exchange，提问作者jmaneaglefan008