Cross-domain jQuery Ajax not working in IE9

Question

I'm trying to access a REST web service using jQuery. The service has correctly got Access-Control-Allow-Origin set to * according to Firebug, and there are no problems accessing it with Chrome/Firefox. However, in IE it doesn't work.

I've looked through plenty of the variations of this question that have already been posted, but so far none of the solutions have worked for me.

Here is my code (simplified the success/failure function contents for ease of reading):

$.support.cors = true;
$.ajax({
   url: 'https://api.guildwars2.com/v1/maps.json?callback=?',
   cache: false,
   type: 'POST',
   dataType: "jsonp",
   success: function() { alert("Success!"); },
   error: function() { alert('Failed!'); }
});

It also doesn't work with GET as the type, nor with or without the callback.

I have also tried making it work without jQuery and haven't been successful:

var xdr = new XDomainRequest();
var url = "https://api.guildwars2.com/v1/maps.json?callback=?";
if(window.XDomainRequest)
{
    if(xdr)
    {
        xdr.onsuccess = function(){alert('Success!');};
        xdr.open("get",url);
        xdr.send();
    }
    else
    {
        alert('Failed!');
    }
}

Any advice anybody could give me would be much appreciated, as I'm considering simply mirroring the web service using file_get_contents() in PHP on my own server, although that would be a last resort as it would gobble up a lot more bandwidth.

You should look at this post, it may help. http://stackoverflow.com/questions/3362474/jquery-ajax-fails-in-ie-on-cross-domain-calls — mguimard, Jun 25 '13 at 13:38

score 1 · Answer 1 · answered Jan 06 '15 at 22:46

1

This plugin solved it for me.

https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest

answered Jan 06 '15 at 22:46

antpaw

15,444
11
59
88

Anyone looking for an quick solution to this problem I highly suggest this plugin. All you have to do is include it in your project before doing your ajax request and everything will work as expected on ie8 and 9. – whitwhoa Mar 19 '15 at 19:00

score 0 · Answer 2 · answered Dec 17 '14 at 17:08

I too got this problem and all solutions from interneteither failed or were not applicable due to client webservice restrictions. (JSONP, XDR, CORD)

For this, I added an iframe in my page which resided in the client;s server. So when we post our data to the iframe and the iframe then posts it to the webservice. Hence the cross-domain referencing is eliminated.

We added a 2-way origin check to confirm only authorized page posts data to and from the iframe.

Hope it helps

<iframe style="display:none;" id='receiver' name="receiver" src="https://iframe-address-at-client-server">
 </iframe>

//send data to iframe
var hiddenFrame = document.getElementById('receiver').contentWindow;
hiddenFrame.postMessage(JSON.stringify(message), 'https://client-server-url');

//The iframe receives the data using the code:
window.onload = function () {
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    eventer(messageEvent, function (e) {
        var origin = e.origin;
        //if origin not in pre-defined list, break and return
        var messageFromParent = JSON.parse(e.data);
        var json = messageFromParent.data;

        //send json to web service using AJAX   
        //return the response back to source
        e.source.postMessage(JSON.stringify(aJAXResponse), e.origin);
    }, false);
}

Cross-domain jQuery Ajax not working in IE9

2 Answers2

Linked