JavaScript请求分块响应文件时，Range头为何无法获取指定范围内容？

看起来你遇到了Range请求不生效的棘手问题，这种场景我之前处理过好几次，咱们一步步来拆解原因和解决方案：

先搞清楚为什么Range请求没用 #

首先得排查服务器端的问题，因为Range请求能否生效，核心取决于服务器是否支持：

• 服务器未开启Range支持：你可以先看第一次GET请求的响应头里有没有Accept-Ranges: bytes这个字段。如果没有，说明服务器根本没配置Range请求的支持，哪怕你发了Range头，它也会直接忽略，返回完整文件。
• Range请求格式错误：要确保Range头的格式是Range: bytes=start-（比如从你本地已保存的字节位置开始，请求到文件末尾）。比如本地已经存了16MB（16777216字节），那请求头应该是Range: bytes=16777216-。格式不对的话，服务器也会返回完整文件。
• Chunked编码与Range的兼容问题：有些服务器在返回Transfer-Encoding: chunked响应时，没有正确处理Range请求逻辑，直接默认返回整个文件流。

针对性解决方案 #

1. 先验证服务器是否支持Range请求 #

先发起一个HEAD请求，或者查看首次GET请求的响应头：

fetch('your-large-file-url', { method: 'HEAD' })
  .then(res => {
    console.log('Accept-Ranges:', res.headers.get('Accept-Ranges'));
  });

如果返回的是bytes，说明服务器支持；如果是none或者没有这个字段，那得和后端开发沟通，让他们开启Range请求的支持（比如Nginx需要配置Accept-Ranges bytes，或者自定义后端服务要实现Range处理逻辑）。

2. 正确构造Range请求并处理响应 #

如果服务器支持Range，那每次请求时带上本地已保存的字节偏移量，然后处理206 Partial Content响应：

// 假设用localStorage持久化已保存的字节数
let savedByteOffset = parseInt(localStorage.getItem('savedByteOffset')) || 0;

async function fetchAndAppendNewContent() {
  try {
    const response = await fetch('your-large-file-url', {
      headers: {
        'Range': `bytes=${savedByteOffset}-`
      }
    });

    if (response.status === 206) {
      // 服务器返回了部分内容，流式读取并追加到本地
      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      let chunkText = '';

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        chunkText += decoder.decode(value, { stream: true });
        // 把新增内容追加到本地存储/文件
        appendToLocalContent(chunkText);
        chunkText = ''; // 重置避免重复追加
      }

      // 更新已保存的字节偏移量
      const contentRange = response.headers.get('Content-Range');
      const newEndByte = parseInt(contentRange.split('/')[0].split('-')[1]);
      savedByteOffset = newEndByte + 1;
      localStorage.setItem('savedByteOffset', savedByteOffset.toString());
    } else if (response.status === 200) {
      // 服务器还是返回了完整文件，只能对比本地内容找差异
      const fullContent = await response.text();
      // 提取本地内容之后的新增部分
      const newContent = fullContent.slice(savedByteOffset);
      appendToLocalContent(newContent);
      savedByteOffset = fullContent.length;
      localStorage.setItem('savedByteOffset', savedByteOffset.toString());
    } else {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
  } catch (err) {
    console.error('增量更新失败：', err);
    // 可以加重试逻辑，比如间隔5秒后重试
    setTimeout(fetchAndAppendNewContent, 5000);
  }
}

// 模拟追加到本地内容的函数
function appendToLocalContent(text) {
  // 这里替换成你实际的本地存储逻辑，比如写入文件或者更新页面内容
  console.log('新增内容：', text);
}

3. 备选方案：用实时推送替代轮询Range请求 #

如果服务器始终不支持Range请求，或者chunked编码下Range处理有问题，那可以考虑更高效的实时同步方案：

• Server-Sent Events (SSE)：适合服务器主动推送文本内容的场景，一旦有新增内容，服务器直接推给客户端，不用客户端反复请求。
• WebSocket：双向通信，适合更复杂的实时同步场景，但实现起来比SSE稍复杂。

这两种方案都能避免重复请求整个文件，效率更高，尤其适合文件定期新增内容的场景。

一些要注意的细节 #

• 字节偏移量一定要持久化（比如用localStorage、IndexedDB或者本地文件），不然页面刷新后会重新请求整个文件。
• 处理网络异常时，要加重试逻辑，但不要频繁重试，避免给服务器造成压力。
• 如果文件内容有固定的分隔符（比如每行一条记录），可以在流式读取时按分隔符分割，避免截断内容。

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