为什么通过jQuery ajax调用接口时res.sendFile返回的HTML页面无法渲染？

问题原因 #

• $.ajax() 发起的是异步HTTP请求，浏览器只会把响应内容返回给JS回调函数，不会自动触发页面渲染逻辑。你之前用location.href = "/products"是让浏览器主动发起整页跳转请求，浏览器收到响应后会自动解析HTML并替换当前页面内容，所以能正常显示。
• 你当前的代码里第二个AJAX请求没有写success回调，拿到返回的HTML内容后没有做任何插入DOM的操作，自然看不到页面渲染效果。

解决方案 #

有两种常用方案，可根据你的需求选择：

方案1：保留AJAX传递自定义请求头的能力，手动渲染返回的HTML #

如果必须在请求头里带JWT等自定义字段，就用该方案，修改main.js里的第二个AJAX请求逻辑，添加success回调处理返回的HTML：

$.ajax({
    url: "http://localhost:8000/products",
    type: 'GET',
    beforeSend: function (xhr) {
        xhr.setRequestHeader("user", localStorage.getItem("user"));
    },
    // 新增success回调
    success: function(html) {
        // 如果是整页HTML，直接替换当前页面的所有内容
        document.open();
        document.write(html);
        document.close();
        // 如果只是局部渲染，就把HTML插入到指定容器即可，比如：
        // $("#app-container").html(html);
    }
});

方案2：不需要自定义请求头时直接跳转 #

如果后续不需要在/products请求头里带特殊字段，可以直接删掉第二个AJAX请求，用location.href跳转即可：

if ($("#login-chkbx").is(':checked')){
    location.href = "/products";
}

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