jQuery.ajax with POST or PUT has no response headers for IE8 and IE9

Question

I've noticed that with IE8 and IE9, if I call my RESTful API using jQuery.ajax() with POST and PUT verbs, then I don't get back any response headers in jqXHR. However, GET requests work as expected.

This behavior is different from all other browsers. I've verified that Chrome, FF, Opera, and Safari all return the full set of expected headers in the response for POST and PUT requests. Only IE8 and IE9 seem to be throwing the headers on the floor. (One thing I haven't checked is what happens with HEAD requests.)

I've verified with Fiddler that the headers are actually making it over the wire, so the problem is either with jQuery itself or with IE8 and IE9.

Is this a known issue? If so, is there a workaround. Can I overload/overwrite something in jQuery to preserve headers following POST and PUT? My current workaround is to simply refetch the modified data using a GET inside the success callback since IE8 and IE9 don't mess with headers for GET operations.

Here's a snippet of my main jQuery-based AJAX worker method:

    $.ajax({
        url: String.format(um.proxy.url, url),
        type: ajaxParams.verb,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: String.format('{0}', ajaxParams.jsonData),
        headers: mapOfHeaders,
        success: function (data, textStatus, jqXHR) {
            //...
        },
        error: function (msg, textStatus, errorThrown) {
            //...
        }
    });

Answer 1

Turns out that this is a known issue with all current flavors of IE (7, 8, and 9). If the response code is a 204, then IE simply throws all headers on the floor. For folks like me writing pure AJAX implementations that require an up-to-date eTag for concurrency checks, IE slays the pure AJAX approach and forces me to do an immediate GET to fetch the current eTag. :facepalm:

Here are a couple of articles I managed to dig up:

ETag header missing in HTTP No Content responses in Internet Explorer

http://dalelane.co.uk/blog/?p=2043

response.headers.ETag undefined

http://datajs.codeplex.com/discussions/398295

One partial workaround is to sniff for IE and then do an immediate HEAD request to fetch the ETag, but the problem with this approach is that if someone has managed to sneak in ahead of you and update the record, you'll be getting the eTag for her changes, not yours. So this is not an acceptable workaround.

So, I sniff for IE and do an immediate GET. Otherwise for all other browsers, I simply use jQuery's jqXHR.getResponseHeader(namespace.constants.headers.eTag) to get the eTag.

Answer 2

If your REST service is on a different server than the application you are requesting from, you may want to check out this article. The accepted answer explains why you need to use the JSONP content type.

jQuery ajax call to REST service