使用JavaScript无需下载获取远程文件大小（Chrome DevTools可运行）

HTTP规范允许服务器在HEAD响应中省略Content-Length这类载荷头，因此靠发HEAD请求拿文件大小的方案并不通用，很多CDN场景下会拿不到结果。

针对HEAD请求不返回Content-Length的场景，可以用HTTP范围请求实现大小查询，代码可直接在Chrome DevTools控制台执行，全程仅传输1字节数据，不会下载完整文件：

const fileUrl = 'https://cdn.lr-in.com/LogRocket.min.js';
fetch(fileUrl, {
  headers: {
    'Range': 'bytes=0-0'
  }
}).then(async (response) => {
  if (response.status !== 206) {
    throw new Error('目标服务器不支持范围请求，无法用该方法获取文件大小');
  }
  const rangeHeader = response.headers.get('Content-Range');
  if (!rangeHeader) {
    throw new Error('响应未返回Content-Range字段，获取大小失败');
  }
  // Content-Range格式为 bytes 0-0/总字节数，提取斜杠后的总长度值
  const totalBytes = Number(rangeHeader.split('/')[1]);
  const sizeInKB = (totalBytes / 1024).toFixed(2);
  console.log(`文件大小：${totalBytes} 字节，约 ${sizeInKB} KB`);
  // 主动取消响应体读取，不下载剩余内容
  response.body?.cancel();
}).catch(err => console.error('获取失败：', err));

实现逻辑 #

• 请求时添加Range: bytes=0-0头，告知服务器仅需要资源的第1个字节内容
• 支持范围请求的服务器会返回206 Partial Content状态码，响应头携带的Content-Range字段会写明资源总字节数
• 拿到响应头后直接取消响应体传输，不会拉取剩余文件内容，流量消耗可忽略
• 针对题目中的CDN地址实测可用，返回的大小数值准确

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