Chrome未清除缓存时XHR上传progress事件失效问题

问题详情 #

• 与小文件无关，已在大文件、限速网络环境测试
• Edge浏览器中进度条功能正常，仅Chrome出现此问题
• 基于XHR开发的文件上传器，文件上传功能正常，但首次上传（或CTRL+SHIFT+R清缓存后）progress事件正常触发，刷新页面后progress事件不再触发，仅load事件能正常触发
• 已确认响应头包含content-length且值大于0

上传代码 #

let uploadFile = () => {
    //... Some other stuffs
    console.log("Upload started")
    let xhr = new XMLHttpRequest();
    let formData = new FormData();
    formData.append('file', file);

    xhr.open("POST", "uploaderServerside.php");
    xhr.upload.addEventListener('progress', function(evt){
        console.log("Uploading: " + (Math.round(evt.loaded / evt.total * 100)) + "%");
    }, false);
    xhr.addEventListener("load", () => {
        console.log("Upload finished")
    });
    xhr.send(formData);
}

解决方法 #

1. 强制避免请求复用/缓存 #

Chrome可能复用旧TCP连接或对POST请求做了优化，导致progress事件丢失。可以在请求URL后添加随机参数，确保每次请求都是全新的：

// 用时间戳作为随机参数，避免连接复用
xhr.open("POST", `uploaderServerside.php?t=${Date.now()}`);

也可以手动设置请求头禁用缓存：

xhr.open("POST", "uploaderServerside.php");
xhr.setRequestHeader("Cache-Control", "no-cache, no-store, must-revalidate");
xhr.setRequestHeader("Pragma", "no-cache");
xhr.setRequestHeader("Expires", "0");

2. 服务器端强制关闭连接 #

在uploaderServerside.php中添加响应头，强制Chrome每次请求建立新连接：

header("Connection: close");

3. 排查Chrome客户端设置 #

若上述代码层面的方法无效，可尝试关闭Chrome的预加载优化：
进入Chrome设置→隐私和安全→Cookie及其他网站数据→关闭“预加载网页以提高浏览速度和性能”选项（此为客户端设置，优先推荐代码层面解决）

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