Edge浏览器XMLHttpRequest返回空响应但Firefox正常的问题求助

问题原因 #

Edge（Chromium内核）对一次性加载的大文本响应有内存限制，当文件体积超过阈值（通常几百MB）时，浏览器会自动清空响应内容以避免内存溢出，即使请求状态码显示为200。Firefox的内存管理策略更宽松，因此能正常加载完整内容。

解决方案：改用流式读取 #

不要一次性获取完整的文本响应，而是通过流式API分块读取文件内容，绕过浏览器的内存限制。

方案1：修改XMLHttpRequest为Blob分块处理

将responseType设置为'blob'，再通过FileReader逐块读取Blob内容：

function loadLargeFile(url, onChunk, onComplete, onError) {
    const request = new XMLHttpRequest();
    request.open('GET', url + (/\?/.test(url) ? '&' : '?') + new Date().getTime(), true);
    request.responseType = 'blob';

    request.addEventListener('load', function(event) {
        if (this.status === 200 || this.status === 0) {
            const blob = this.response;
            const reader = new FileReader();
            let offset = 0;
            const chunkSize = 10 * 1024 * 1024; // 10MB每块，可按需调整

            function readChunk() {
                if (offset >= blob.size) {
                    onComplete();
                    return;
                }
                const chunk = blob.slice(offset, offset + chunkSize);
                reader.onload = function(e) {
                    onChunk(e.target.result);
                    offset += chunkSize;
                    readChunk();
                };
                reader.onerror = onError;
                reader.readAsText(chunk);
            }

            readChunk();
        } else {
            onError(event);
        }
    });

    request.addEventListener('error', onError);
    request.send(null);
}

// 使用示例
loadLargeFile(
    '你的大文件地址',
    (chunk) => {
        // 处理单块内容，比如追加到页面、解析片段或写入本地存储
        console.log('收到块内容长度:', chunk.length);
    },
    () => {
        console.log('文件加载完成');
    },
    (err) => {
        console.error('加载失败:', err);
    }
);

方案2：使用Fetch API的ReadableStream流式读取

Fetch原生支持流式响应，更适合处理超大文件：

async function loadLargeFileWithFetch(url, onChunk, onComplete, onError) {
    try {
        const response = await fetch(url + (/\?/.test(url) ? '&' : '?') + new Date().getTime());
        if (!response.ok && response.status !== 0) {
            throw new Error(`请求错误！状态码: ${response.status}`);
        }
        const reader = response.body.getReader();
        const decoder = new TextDecoder('utf-8');
        
        while (true) {
            const { done, value } = await reader.read();
            if (done) {
                onComplete();
                break;
            }
            const chunk = decoder.decode(value, { stream: true });
            onChunk(chunk);
        }
    } catch (err) {
        onError(err);
    }
}

// 使用示例
loadLargeFileWithFetch(
    '你的大文件地址',
    (chunk) => {
        console.log('收到块内容长度:', chunk.length);
    },
    () => {
        console.log('文件加载完成');
    },
    (err) => {
        console.error('加载失败:', err);
    }
);

注意事项 #

• 分块大小可根据实际需求调整，10MB-50MB的区间在内存占用和处理效率之间较为平衡。
• 如果需要完整的文件内容，可以在onChunk回调中拼接各块，但超大文件建议边读边处理（比如实时解析、写入IndexedDB等），避免内存过载。

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