Question

I’m experiencing a difficult ajax error in IE9. I will say up-front that this is not technically a cross-domain request so I’m sure that is not the problem.

Edit: It appears that the problem may be related to a same-domain request being treated as cross-domain, though it is not clear why (see comments).

I’m using a local proxy to make cross-domain ajax requests, and the url I use looks like http://localhost/proxy/?target=..... All good browsers are happy with this but IE immediately returns an error before the request is even dispatched (I have verified this using Fiddler and IE’s developer tools network capture).

When I inspect the error object passed to JQuery’s ajax.error callback its isRejected() function returns true, but I can’t find out what would cause a request to be rejected. The error object’s readyState is 4 (implying the request is complete?), status is 0 and statusText is “error”.

I’m building my request a bit like this:

$.ajax(url, {
    data: {...list of parameters...},
    dataType: 'json',
    type: 'GET',
    success: function() { ... },
    error: function() { ... },
    beforeSend: proxy.beforeRequestSend,
    timeout: 35000
});

The proxy.beforeRequestSend function looks like this:

this.beforeRequestSend = function(XHR, settings) {

  if(that.proxyRequired(settings.url)) {
    // I've also tried using the full url (http://localhost/proxy/?...)
    settings.url = 'proxy/?target=' + encodeURIComponent(settings.url); 
  }
};

Does anyone know what would cause the request to fail outright in IE9? Unfortunately I don’t have access to IE8 or 7 for testing but I assume they would behave the same. The fact that JQuery’s ajax error handler is invoked suggests that the error is not occuring while I am building the request, but when it is supposedly executed. All other browsers working correctly tells me that the fundamentals are correct.

I have previously read that the JQuery / IE combo has issues url-encoding some characters, but if I alert settings.url at the end of the beforeSend function the target URL is correctly encoded (this also tells me that that.proxyRequired(settings.url) returns true).

Any input much appreciated.

Answer 1

As you can see in my question’s code I am prepending the proxy url in the JQuery.ajax function’s beforeSend callback (proxy.beforeRequestSend). By the time this function is executed JQuery has already inspected the request and decided that is it cross-domain.

As a result JQuery was treating all my requests as cross-domain, even though they all went to the local proxy. JQuery then rejected any cross-domain request in IE and Opera because they don’t support CORS.

Fortunately the crossDomain property is passed to the beforeSend callback in the settings object and is easily changed.

this.beforeRequestSend = function(XHR, settings) {

  if(that.proxyRequired(settings.url)) {
    settings.url = 'proxy/?target=' + encodeURIComponent(settings.url);
    settings.crossDomain = false;
  }
};