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'

Radian

Just to add: This has been tested in both firefox and opera. Same results – Radian

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.

Wallace

This is the correct answer, if you have to use CORS and have these problems. – Yves

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).

Cuba

The server generates a 201 Created response. I sure hope jquery doesn't interpret this as a redirect. And firebug does not show a second request. – Radian

@Nik - It has a Location header though, right? that's a redirect. – Cuba

It does have a location header, but if I understand the http response codes, 30x series means redirect. not 20x. 20x does not imply further action. The location header should be informational. But maybe I am wrong? – Radian

@Nik - Do you have a server I can see this on? You're sure the initial response is a 201, the initial one with the Location header...not the second? – Cuba

After checking my server logs for my ruby on rails application, I do not see a second request after the 201 response. So xhr is not redirecting to the location. That is fine, but maybe jquery is getting confused? Any more ideas? Thanks for your help. ;) – Radian

@Nick - I do not have it on a live server unfortunately. -edit- Yes I am sure that the 201 is the only response. jQuery uses post to send to rails, rails creates the object and sends back a 201 with a location. – Radian

@Nik - jquery doesn't really control anything here, it's all the underlying XMLHttpRequest - I can't say for sure based on what syptoms you describe - would need to be able to hit the URL from here and look at the request/response. – Cuba

Ok, I appreciate your help. This is kind of a sensitive project, so I won't be able to make it live, but I might be able to make a mocked version with the same request/response cycle and problem. – Radian

@Nik - if you can do that please comment here, would be happy to take a look – Cuba

I made as test application, using a standard ajax request sending only text fields. It works as it should. I think the problem is related to the fact that I am using the forms plugin to do an ajax file upload. The issue must be because it is using a hidden iframe. Not an actual xhr request. Sorry to waste your time. – Radian

Answer 3

I'm doing something similar using the rails/rest way of returning a 201 "created" with a Location header to the new object and an empty body. jQuery's ajax method will throw a "parseerror" when encountering this since its expecting json but getting nothing back. I simply catch the 201 redirect in my error callback like so:

function request_error(req, textStatus, errorThrown) 
{
    if (req.status == 201 ) {
        var created_loc = req.getResponseHeader('Location');
        console.log('(201) created: ' + created_loc);

        // ... manual redirect here i.e. issue another ajax request to created_loc
        return;
    }

    // ... handle an actual error here
}

hope this helps!

Moberg

Just set dataType: 'text' as arg, and you can catch the 201 in the complete callback (or even better: jqXHR.done). – Shawna