如何从跨域 Ajax 请求访问 Content-Length 标头？

Question

我的 JavaScript 应用程序需要在使用 Ajax 下载资源之前确定资源的长度。通常这不是问题，您只需发出 HEAD 请求并提取 Content-Length。

var xhr = $.ajax({type:"HEAD", url: "http://own-domain/file.html"})
xhr.getResponseHeader("Content-Length")  
// "2195"

但是，资源存储在与客户端不同的服务器上。 （我控制的服务器）。所以我使用 CORS 来发出跨域 ajax 请求，并设置服务器来响应 HEAD 请求的预检请求和带有自定义标头的 GET/POST 请求。

这总体上效果很好，但是在使用 CORS 时，我似乎找不到从 HEAD 响应中提取 Content-Length 的方法：

var xhr = $.ajax({type:"HEAD", url: "http://other-domain/file.html"})
xhr.getResponseHeader("Content-Length")
// ERROR: Refused to get unsafe header "Content-Length"

我已经尝试在预检或响应中设置各种标头，例如

Access-Control-Expose-Headers: Content-Length

规范似乎建议应该使其可用。但无论我做什么，我似乎都无法使 Content-Length 标头对客户端可用。有什么建议吗？

（铬 8）

Answer 1

我遇到了同样的问题，直到我在其他地方找到了一个帖子，教我在我的 .htaccess 中添加这一行：

Header add Access-Control-Expose-Headers "Content-Length"

然后 BOOM，它得到了修复。

Answer 2

我发现所有浏览器中的 CORS 响应标头支持都存在问题。在 Chrome/Safari 中，我只在 getAllResponseHeaders() 的结果中看到简单的响应标头 (http://www.w3.org/TR/cors/#terminology)，即使是“Access-Control-Expose-Headers”标头在响应中设置。在 Firefox 3.6.13 中， getAllResponseHeaders() 不返回任何内容（甚至不返回简单的响应标头）。作为一种解决方法，我想您可以重载一个简单的响应标头以包含内容长度，但这可能会导致其他问题，并且仍然无法修复 Firefox。