jquery getResponseHeader always returns 'undefined'?

demersus picture demersus · Dec 6, 2010 · Viewed 25.2k times · Source

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

acdcjunior picture acdcjunior · Mar 16, 2013

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.