javascript - uploader Chrome ( DropZone ) 出现 ERR_SPDY_PING_FAILED 错误

Question

我有一个基于 http://www.dropzonejs.com/ 的 uploader

当我使用 Chrome 上传大于 3 MB ( 13 MB ) 的文件时，我在控制台日志中收到 ERR_SPDY_PING_FAILED 错误。

当我上传文件时，进度条停留在某个级别。这是我们收到此错误的时间。

我在 Safari 和 Firefox 上试过了，我们没有这个问题。

我用谷歌搜索，发现其他人也提示同样的问题。

这是来自 Chrome 的请求 header

Provisional headers are shown
Accept: application/json
Cache-Control: no-cache
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary4sLYTyIwAAXnftvv
Origin: https://www.example.com
Referer: https://www.example.com/upload/document
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
X-Requested-With: XMLHttpRequest
------WebKitFormBoundary4sLYTyIwAAXnftvv
Content-Disposition: form-data; name="_token"

GiY0lmkggP4hlyhunGRQOOBa1k1dqsr44ZgHA41e
------WebKitFormBoundary4sLYTyIwAAXnftvv
Content-Disposition: form-data; name="file[0]"; filename="sdf_brz_lin.1.jpg"
Content-Type: image/jpeg


------WebKitFormBoundary4sLYTyIwAAXnftvv--

在这篇 stackoverflow 帖子中，他们提出了一些解决方案，但我无法实现他们的解决方案，因为它们基于其他脚本。

request stalled for a long time occasionally in chrome

他们提出了类似的东西

$(document).ready(function() {
    $.keepalive =     
            setInterval(function() {
               $.ajax({
                  url: '/ping.html',
                  cache: false
               });         
            }, 60000);    
});

但我不知道如何将此解决方案集成到我的 dropzone。

我不想说如果访问者使用 chrome，你不能上传大于 X MB 的文件......

Answer 1

我刚刚追踪了其中一个。这是由于上传目标服务器的 HTTP2 接收窗口设置过大造成的。。

如果客户端和服务器之间有足够多的代理或其他东西，两个端点之间的总 TCP 缓冲就足以吞下上传的结尾，但直到很晚才完成传送。

浏览器厌倦了等待完成。当浏览器感到无聊时，它会变得偏执，并发送一个 HTTP2 PING 来检查连接是否仍然存在。 (鉴于它不断获得关于接收方目前实际接收了多少的 HTTP2 更新，这似乎是不必要的/一个错误!)

PING 进入与流量相同的多路复用 HTTP2 TCP 连接，并被困在那里，直到达到 PING 超时。客户端失去信心并终止连接，这是无益的，因为它实际上还活着!

通过将 HTTP2 接收窗口减小到一个合理的值，浏览器将不会被允许发送足够多的数据而导致巨大的交通拥堵。

如果您无法让服务器执行此操作，您可以使用浏览器 F12 网络诊断工具将上传速率限制为最多匹配链中最小带宽瓶颈的值- 不会形成交通拥堵，这意味着 PING 不会超时。

您可以将其称为 Bufferbloat 问题的表现。