为啥 XMLHttpRequest 上传在 Firefox 中没有正确失败？

Posted 2023-02-27

【中文标题】为啥 XMLHttpRequest 上传在 Firefox 中没有正确失败？

【英文标题】：Why is XMLHttpRequest upload not failing properly in Firefox?为什么 XMLHttpRequest 上传在 Firefox 中没有正确失败？

【发布时间】：2018-12-08 14:18:17

【问题描述】：

我正在实现一个文件上传器，用户可以使用XMLHttpRequest 上传一个或多个文件。我不使用fetch，因为我需要能够向用户提供有关上传进度的视觉反馈。

我遇到的问题是服务器在上传完成之前停止处理上传（例如，如果上传的文件太大，则以413 Payload Too Large 错误关闭连接）。如果在使用 Safari 或 Chrome 时出现此类错误，它们将按我的意愿停止上传。

然而，在 Firefox 中，它似乎忽略了这一点，并在停止之前重试了几次上传。

我的代码如下：

// Initialize a new request object.
let req = new XMLHttpRequest();

// Set expected response as JSON.
req.responseType = 'json';

// Set event handlers.
req.upload.onreadystatechange = function(e)  console.log(e.type); 
req.upload.onuploadstart = function(e)  console.log(e.type); 
req.upload.onprogress = function(e)  console.log(e.type); 
req.upload.onabort = function(e)  console.log(e.type); 
req.upload.onload = function(e)  console.log(e.type); 
req.upload.ontimeout = function(e)  console.log(e.type); 
req.upload.onuploadend = function(e)  console.log(e.type); 

// Open request, set request header.
req.open('POST', '/some-endpoint', true);
req.setRequestHeader('Content-type', 'multipart/form-data;boundary=---some-boundary---');

// Create FormData object to submit.
let fd = new FormData(formElement);

// Send data.
req.send(fd);

在 Safari 和 Chrome 中，当我上传的文件太大而服务器无法接受时，导致服务器以 413 状态响应关闭连接，事件按以下顺序触发：

loadstart
progress (multiple)
Failed to load resource (413 Request Entity Too Large)

正如我所料。在 Firefox 中，事件按以下顺序触发：

loadstart
progress (multiple, ignoring connection closes and restarting upload multiple times)
loadend

Firefox 似乎没有在loadend 事件之前触发load、error、abort 或timeout 事件，如XMLHttpRequest.upload documentation 中所示

查看每个浏览器的开发工具的网络选项卡表明 Chrome 和 Safari 都识别出服务器已响应 413，但 Firefox 未识别任何响应状态（即使在loadend 之后）。

版本为 Firefox Quantum 62.0b3（64 位）。 Safari 是 11.0.1。 Chrome 是 67.0.3396.99。

那么，问题来了：为什么 Firefox 无法识别上传过程中发生了服务器错误并取消上传，而 Safari 和 Chrome 可以？和是否存在有什么办法可以解决这个问题？

【问题讨论】：

有趣的类似bugzilla.mozilla.org/show_bug.cgi?id=292407

【参考方案1】：

作为Cody G. suggested，这可能是 Firefox 中的错误，或与错误有关。

这没有回答原始问题。但是，它确实提供了一种解决方法，并希望为其他人提供一些潜在的启发性信息。

Firefox、Safari 和 Chrome 都会在上传成功时以相同的顺序触发事件（即，当服务器在上传完成之前没有发回响应或关闭连接时）。该顺序是：

readystatechange (readyState = 1)
loadstart
progress (1...n times)
load
loadend
readystatechange (readyState = 2)
readystatechange (readyState = 4)

...正如预期的那样。

当上传失败时（即服务器关闭连接并发回响应），Safari 和 Chrome 会以相同的顺序触发事件。该顺序是：

readystatechange (readyState = 1)
loadstart
progress (1...n times)
[the server responds with an error, which does *not* trigger an error event]
readystatechange (readyState = 2)
readystatechange (readyState = 3)
readystatechange (readyState = 4)

另一方面，Firefox 在上传失败时按此顺序触发事件：

readystatechange (readyState = 1)
loadstart
progress (1...n times, including retrying from the start more than once when the server responds or closes the connection)
readystatechange (readyState = 2)
readystatechange (readyState = 3)
readystatechange (readyState = 4)
error
loadend

为了防止 Firefox 无缘无故地多次重启上传，我的解决方法是包含一个变量来跟踪先前加载的数量：

let prevLoaded = 0;
xhr.upload.addEventListener('progress', function(e) 
    if (prevLoaded !== 0 && e.loaded <= prevLoaded) 
        xhr.abort();
        return;
    
    prevLoaded = e.loaded;
, false);

这会导致请求被取消。 Safari 和 Chrome 不会运行此代码，因为其他事件会先触发。有了这段代码，Firefox 上传失败的事件触发顺序变为：

readystatechange (readyState = 1)
loadstart
progress (1...n times, but almost always stopping after the server closes the connection or responds with an error)
readystatechange (readyState = 4)
abort
loadend