JQuery CORS and Redirects

Question

Using JQuery 1.8.2

I'm making a CORS request to an app from one AppServer (Front) to another AppServer (Back) server. When i make the following Ajax calls from Front, the 302 response (security check) from Back is honored, but my JSESSIONID cookie is not stored:

$.ajax({
    url : url,
    dataType : 'html',
    success : function(data, status, xhr) {
    $(dataContainer).append(data);
    },
    complete: function(xhr, status, error) {
    if (xhr.status != 200) {
        $.logger(xhr.getResponseHeader('Location'));
        }
    }
});

Now, if i make the same call, but add in the withCredentials, my JSESSIONID is being correctly stored, but the 302 redirect is being dropped. Both Chrome & Firefox (latest versions of both) simply stop processing the request.

$.ajax({
    xhrFields: { withCredentials: true },
    url : url,
    dataType : 'html',
    success : function(data, status, xhr) {
    $(dataContainer).append(data);
    },
    complete: function(xhr, status, error) {
    if (xhr.status != 200) {
        $.logger(xhr.getResponseHeader('Location'));
        }
    }
});

I attempt to get the redirect location header off of the xhr object, but it is empty.

I am setting the following on all responses coming out of Back:

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS");
response.setHeader("Access-Control-Max-Age", "1728000");
response.setHeader("Access-Control-Allow-Headers", "Cookie,X-Requested-With");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Expose-Headers", "Location");

Obviously I'll limit the Origin when/if i can get it working.

Does anyone know what is needed to get this working with JQuery? Is it a JQuery issue, or one experienced with all Ajax+CORS requests?

Answer 1

You can not use Access-Control-Allow-Origin: * in conjunction with Access-Control-Allow-Credentials: true. When Access-Control-Allow-Credentials is set to true, the value of Access-Control-Allow-Origin must be the value of the Origin header:

response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));

Alternatively, you could drop the Access-Control-Allow-Credentials: true header (along with the withCredentials = true JS code).

Answer 2

Try adding crossDomain in the ajax settings.

$.ajax({
    xhrFields: { withCredentials: true },
    url : url,
    dataType : 'html',
    crossDomain: true, 
    success : function(data, status, xhr) {
    $(dataContainer).append(data);
    },
    complete: function(xhr, status, error) {
    if (xhr.status != 200) {
        $.logger(xhr.getResponseHeader('Location'));
        }
    }
});

Also use

jQuery.support.cors = true;

before calling $.ajax.

In Firebug->Net->All tab do you see a GET request or an OPTIONS request?