jquery getResponseHeader always returns 'undefined'?

Question

I have a a form that I am submitting via ajax. I am using the jquery form plugin. What I am trying to do is get the 'Location' header which is returned from my server. I can see it in firebug. But whenever I call the getResponseHeader() function in my success callback, it always returns 'undefined'..

Code:

form.ajaxForm({
  dataType: 'xml',
  data: {format: 'xml'},
  resetForm: true,
  success: function(xml,status,xhr){
    var location = xhr.getResponseHeader('Location');
    alert(location);
  });

location is undefined. But I can see the 'Location' header in firebug. What am I missing? Even if I call getAllResponseHeaders() from the xhr object, it returns 'undefined'

Answer 1

If this is a CORS request, you may see all headers in debug tools (such as Chrome->Inspect Element->Network), but the xHR object will only retrieve the header (via xhr.getResponseHeader('Header')) if such a header is a simple response header:

• Content-Type
• Last-modified
• Content-Language
• Cache-Control
• Expires
• Pragma

If it is not in this set, it must be present in the Access-Control-Expose-Headers header returned by the server.

About the case in question, if it is a CORS request, one will only be able to retrieve the Location header throgh the XMLHttpRequest object if, and only if, the header below is also present:

Access-Control-Expose-Headers: Location

If its not a CORS request, XMLHttpRequest will have no problem retrieving it.

Answer 2

An XMLHttpRequest will transparently follow a redirect, so the final request won't have the header, it's already followed that redirect and you're seeing the response headers from that request (not the initial request which had the Location header).