Question

I’ve written a Javascript method that sends a cross-domain POST request from a client-side browser to our API written in PHP:

$.ajax({
    type:        'POST',
    url:        backend_url,
    data:        postArgs,
    beforeSend:    function( xhr, settings ) {
        xhr.setRequestHeader( 'Connection', 'close' );
    },
    error:        function( xhr, status, errorThrown ) {
        console.log( 'RECONTRIBUTION: Error on AJAX request! status=' + status + ', errorThrown=' + errorThrown + ', statusText=' + xhr.statusText );
        $( '#alert_message' ).showAlertMsg( 'error', 'Oops, we couldn\'t talk to our server!  Please try again in a moment.' );
    },
    success:    function( data, status, response ) {
        //do things
    }
});

Everything works great in Firefox, Chrome, and Safari, but in IE9 I’m running into problems. The first issue was that I was getting a “No Transport” error which I assumed was being caused by IE’s restrictions on cross-domain requests. I got the request to go through by setting jQuery.support.cors to true and by including this plugin, found on a different SO thread: https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest/blob/master/jQuery.XDomainRequest.js

Now the request completes, but the API returns an error because the request body is missing.

Working request from Chrome (urls redacted):

POST [backendurl] HTTP/1.1
Host: [backendurl]
Connection: keep-alive
Content-Length: 79
Origin: [frontendurl]
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.83 Safari/537.1
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Accept: */*
Referer: [frontendurl]
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
DNT: 1

action=contributeSong&client=TUNEBOT&iTunes_id=17344380&user_id=&query_id=64600

And a non-working request from IE9:

POST [backendurl] HTTP/1.1
Accept: */*
Origin: [frontendurl]
Accept-Language: en-US
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Host: [backendurl]
Content-Length: 0
Connection: Keep-Alive
Pragma: no-cache

The weird part is that I tried to set the Connection header to Close because I read that Keep-Alive sometimes causes problems with internet explorer…but the requests are sending Connection: Keep-Alive anyway. Any ideas? I’ve been tearing my hair out for a couple of days over this.

UPDATE: OK, so after doing some more reading about the XDR Object, I’ve realized that I can’t send custom headers, which explains the Keep-Alive issue. And I looked at the plugin, which wasn’t sending any data to the server (…), so now I’ve got request that APPEARS to be sending data, but still gets the same response…

POST [backendurl] HTTP/1.1
Accept: */*
Origin: [frontendurl]
Accept-Language: en-US
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Host: [backendurl]
Content-Length: 79
Connection: Keep-Alive
Pragma: no-cache

action=contributeSong&client=TUNEBOT&iTunes_id=23148795&user_id=&query_id=64612

Adding the cache:false option, as suggested below, doesn’t seem to affect anything. Is Connection:Keep-Alive what’s killing me here?

Answer 1

Fixed it! The IE9 XDR plugin I downloaded wasn’t sending any data to the server when executing the XDR request, so I added my data to the request and modified my API to parse the $HTTP_RAW_POST_DATA variable as needed. What a pain, I hope IE10 is as revolutionary as it’s made out to be…