为什么 XMLHttpRequest 上传在 Firefox 中没有正确失败?

Question

我正在实现一个文件上传器，用户可以在其中使用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文档所示。

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

版本是Firefox Quantum 62.0b3(64位(。Safari 是 11.0.1。铬是 67.0.3396.99。

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

Answer 1

正如Cody G.所建议的那样，这可能是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