Chrome下载大文件时出现Network Error的问题咨询与解决

Chromium系浏览器（Chrome、Edge）本身没有公开的“大文件总并发容量”硬性限制，但你遇到的问题是内存过载触发的隐式保护机制：Axios默认会将整个响应内容加载到内存中，单12GB文件就会占用大量内存，并发多个时内存占用超出浏览器的安全阈值，导致浏览器主动终止请求；而Firefox的内存管理策略对这类场景的容忍度更高，因此不会出现问题。设备差异源于不同设备的内存容量、浏览器内存分配阈值不同，所以触发失败的并发数存在区别。

解决方案 #

1. 使用流式下载（推荐） #

将Axios的响应类型设为stream，直接处理数据流而非加载整个文件到内存，大幅降低内存占用：

import axios from 'axios';
import { saveAs } from 'file-saver';

async function downloadLargeFile(url, filename) {
  const response = await axios.get(url, {
    responseType: 'stream',
    // 可选：启用分段下载，进一步降低单请求内存压力
    headers: { 'Accept-Ranges': 'bytes' }
  });

  const blob = new Blob([response.data], { 
    type: response.headers['content-type'] 
  });
  saveAs(blob, filename);
}

2. 限制并发下载数量 #

实现下载队列，控制同时进行的任务数，避免内存瞬间过载：

import pLimit from 'p-limit';

// 根据设备性能设置并发数，比如1或2
const limit = pLimit(2);

const downloadTasks = [
  () => downloadLargeFile('url1', 'file1.mp4'),
  () => downloadLargeFile('url2', 'file2.mp4'),
  () => downloadLargeFile('url3', 'file3.mp4'),
  () => downloadLargeFile('url4', 'file4.mp4')
];

// 按限制的并发数执行任务
await Promise.all(downloadTasks.map(task => limit(task)));

3. 改用浏览器原生下载 #

绕过Axios，直接用浏览器的下载管理器处理，完全不占用JS内存：

function nativeDownload(url, filename) {
  const link = document.createElement('a');
  link.href = url; // 需使用S3预签名URL，确保CORS配置允许
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

4. 优化S3响应配置 #

确保S3存储桶返回正确的响应头：

• 开启Accept-Ranges: bytes，支持分段下载
• 正确设置Content-Length，让浏览器能预估文件大小
• 配置合理的CORS规则，允许前端发起下载请求

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