Fetch请求HTML时提前进入then回调，未加载完整内容求助

我用Fetch接口填充页面HTML内容，后端是自托管服务，DNS使用Cloudflare，通过Nginx反向代理，基于Node.js、Express和EJS框架开发。但从昨日起，Fetch请求在响应体未完全接收时就提前进入后续处理逻辑。

我的前端获取并解码HTML的函数如下：

function fetchWindow(element) {
    let link = element.getAttribute('data-nav-link');
    let checked = element.checked;

    console.log('fetchWindow');
    console.log(link, checked);

    // 添加加载动画
    document.querySelector('.render-content').innerHTML = `<div class='loader'><div class="line-wobble"></div></div>`;

    // 根据选中状态获取HTML
    if(checked) {
        fetch(`./dashboard/${link}`, {
            method: 'GET',
            credentials: 'same-origin'
        }).then((res) => {

            // 响应异常时提示
            if(!res.ok) {
                M.toast({html: `Error ${res.status}: ${res.headers.get('err')}`, classes: `red darken-4`});
                return;
            }

            // 读取响应体
            res.body.getReader().read().then((data) => {
                let html = new TextDecoder("utf-8").decode(data.value);
                document.querySelector('.render-content').innerHTML = html;
                init();
            }).catch((err) => {
                console.log(err);
            });
        }).catch((err) => {
            console.log(err);
        });
    }
}

我已确认后端接口生成并发送了完整HTML，浏览器也接收到完整内容，但控制台网络标签显示Fetch请求提前完成，且响应体大小与实际相差4倍。试过用setTimeout但效果不稳定，调整Nginx的proxy_buffering配置也无明显改善。看到有帖子提到可能是延迟发送空响应体导致浏览器误判请求完成。

1. 修复前端响应体读取逻辑 #

你当前只调用了一次res.body.getReader().read()，该方法仅能读取一段响应数据，无法处理分段传输的完整内容。当响应体较大时，第一次读取只能拿到部分数据，自然会提前处理不完整的HTML。

方案A：自动读取完整响应的简洁写法

直接使用Fetch API提供的res.text()方法，它会自动处理所有分段数据，返回完整的文本内容：

// 替换原有的res.body.getReader()代码块
res.text().then((html) => {
    document.querySelector('.render-content').innerHTML = html;
    init();
}).catch((err) => {
    console.log(err);
});

方案B：手动循环读取（适合需要流式处理的场景）

如果必须使用ReadableStream，需要循环读取直到响应结束：

// 替换原有的res.body.getReader()代码块
const reader = res.body.getReader();
const decoder = new TextDecoder("utf-8");
let html = '';
let done = false;

while (!done) {
    const { value, done: isDone } = await reader.read();
    done = isDone;
    if (value) {
        // stream: true 表示后续还有数据，避免截断多字节字符
        html += decoder.decode(value, { stream: true });
    }
}
// 最后一次解码确保所有数据处理完成
html += decoder.decode();

document.querySelector('.render-content').innerHTML = html;
init();

2. 后端与代理层排查 #

• Node.js/Express端：确保EJS渲染完成后再发送响应，比如所有异步操作都已等待完毕才调用res.render()；检查是否正确设置了Content-Length响应头，Cloudflare和Nginx依赖该头判断响应是否完整。
• Nginx配置：强制开启缓冲并设置合理的缓冲区大小，避免分段异常：

  proxy_buffering on;
  proxy_buffer_size 4k;
  proxy_buffers 8 4k;
  proxy_busy_buffers_size 8k;
  

• Cloudflare设置：暂时关闭Rocket Loader或Auto Minify功能，排查是否是这些优化导致的响应分段错误。

3. 验证响应完整性 #

在浏览器网络请求的「Response」标签查看完整内容，对比后端实际输出的HTML长度，确认Content-Length头的值与实际内容长度是否一致。如果不一致，说明后端未正确计算响应长度，导致浏览器提前结束请求。

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