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.

Answer 1

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

Answer 2

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!

Answer 3

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.