My JavaScript application needs to determine the length of a resource before downloading it with Ajax. Ordinarily this is not a problem, you just make a HEAD request and extract the Content-Length.

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

However, the resources are stored on a different server to the client. (A server I control). So I'm using CORS to make cross domain ajax requests, and have set up the server to respond to preflighting requests for HEAD requests and GET/POST requests with custom headers.

That is working great in the main, but I can't seem to find a way extract the Content-Length from the HEAD response when working with CORS:

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

I have experimented with setting various headers in the preflighting or in the response, such as

Access-Control-Expose-Headers: Content-Length

which the specification seems to suggest should make it available. But no matter what I do, I can't seem to make the Content-Length header available to the client. Any suggestions?

(Chrome 8)

My JavaScript application needs to determine the length of a resource before downloading it with Ajax. Ordinarily this is not a problem, you just make a HEAD request and extract the Content-Length.

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

However, the resources are stored on a different server to the client. (A server I control). So I'm using CORS to make cross domain ajax requests, and have set up the server to respond to preflighting requests for HEAD requests and GET/POST requests with custom headers.

That is working great in the main, but I can't seem to find a way extract the Content-Length from the HEAD response when working with CORS:

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

I have experimented with setting various headers in the preflighting or in the response, such as

Access-Control-Expose-Headers: Content-Length

which the specification seems to suggest should make it available. But no matter what I do, I can't seem to make the Content-Length header available to the client. Any suggestions?

(Chrome 8)

• javascript
• ajax
• header
• cross-domain
• cors

2 Answers 2

I was having the same problem, till I found a thread somewhere else that taught me to add this line on my .htaccess:

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

Then BOOM, it got fixed.

I've found CORS response header support in all browsers to be buggy. In Chrome/Safari, I only see simple response headers (http://www.w3/TR/cors/#terminology) in the result of getAllResponseHeaders(), even when the "Access-Control-Expose-Headers" header is set in the response. And in Firefox 3.6.13, getAllResponseHeaders() doesn't return anything (not even simple response headers). As a workaround, I suppose you could overload one of the simple response headers to include the content-length, but that may cause other issues, and still wouldn't fix Firefox.