javascript - 为什么 ProgressEvent.lengthComputable 为假？

Question

我在 Google Chrome、Safari 和 Firefox 中使用 XMLHttpRequest 加载一个 JSON 文件。在所有三种浏览器中，我都收到了正确显示 .loaded 属性的 ProgressEvent。但是，.lengthComputable 属性为 false，.total 属性为零。我已经检查过 Content-Length HTTP header 是否正在发送并且是正确的 - 是的。响应正在 gzip 编码，但 Content-length 正确显示编码长度(解压缩前)。

为什么总长度在我的 ProgressEvent 中不可用？

标题如下:

HTTP/1.1 200 OK
ETag: "hKXdZA"
Date: Wed, 20 Jun 2012 20:17:17 GMT
Expires: Wed, 20 Jun 2012 20:17:17 GMT
Cache-Control: private, max-age=3600
X-AppEngine-Estimated-CPM-US-Dollars: $0.000108
X-AppEngine-Resource-Usage: ms=2 cpu_ms=0 api_cpu_ms=0
Content-Type: application/json
Content-Encoding: gzip
Server: Google Frontend
Content-Length: 621606

注意:该文件是通过 Google App Engine 提供的。

这是 JavaScript:

var req;
if (window.XMLHttpRequest){
    req = new XMLHttpRequest();
    if(req.overrideMimeType){
        req.overrideMimeType( "text/json" );
    }
}else{
    req = new ActiveXObject('Microsoft.XMLHTTP');
}

// Listen for progress events
req.addEventListener("progress", function (event) {
    console.log(event, event.lengthComputable, event.total);
    if (event.lengthComputable) {
        self.progress = event.loaded / event.total;
    } else if (this.explicitTotal) {
        self.progress = Math.min(1, event.loaded / self.explicitTotal);
    } else {
        self.progress = 0;
    }
    self.dispatchEvent(Breel.Asset.ON_PROGRESS);
}, false);

req.open('GET', this.url);

注意:该代码中的 console.log 显示了数百个具有最新 .loaded 的事件，但 .lengthComputable 始终false 和 .total 始终为零。 self 是指负责此 XMLHttpRequest 的对象。

Answer 1

如果 lengthComputable 在 XMLHttpRequestProgressEvent 中为 false，这意味着服务器从未在响应中发送 Content-Length header 。

如果您使用 nginx 作为代理服务器，这可能是罪魁祸首，尤其是当它没有将 Content-Length header 从上游服务器通过代理服务器传递到浏览器时。