jQuery cross domain request still failing in IE, but using jsonp

Question

My Ajax cross domain request is failing in IE 9 with "Access denied". I have read through several posts regarding this topic, and AFAIK it should work.

1. IE9 and jQuery 1.8.1
2. Call is async, jsonp and crossdomain, cache is false. These are the prerequisites I have found.
3. Works in latest Firefox and Chrome.
4. jQuery.support.cors is true
5. Even the response header is set: Access-Control-Allow-Origin:* (SO)
6. The returned JSON code would also be correct, have used a checker (also see 3.)

So why is this failing with Access denied? Any idea? Could it be because my code is called from within a "JavaScript" library, and not a <script></script> tag on the page?

What am I missing?

    // The code is part of an object's method (prototype)
    // code resides in a library "Mylib.js"

    $.ajax({
        type: 'GET',
        url: url,
        cache: false,
        async: true,
        crossdomain: true, // typo, crossDomain, see my answer below
        datatype: "jsonp", // dataType
        success: function (data, status) {
            if (status == "success" && !Object.isNullOrUndefined(data)) {  ... }

        },
        error: function (xhr, textStatus, errorThrown) {
           // access denied
        }
    });

-- Edit -- based on Robotsushi's comments, some further research ---

1. Indeed, cannot find XDomainRequest in the jQuery source code (1.8.1)
2. If I do not set cors (jQuery.support.cors = true) I'll end up with a "No Transport" exception.
3. Still wondering why others obviously succeed with IE9 cross domain requests, e.g. here: jQuery Cross-Domain Ajax JSONP Calls Failing Randomly For Unknown Reasons In Some IE Versions

4. The way jQuery handles this, seems to be around the code below, but this is not called in my particular case, no idea why?

   // Bind script tag hack transport jQuery.ajaxTransport( "script", function(s) {

   // This transport only deals with cross domain requests
   if ( s.crossDomain ) {
   

5. A similar situation here in year 2010: Jquery $.ajax fails in IE on cross domain calls However, this should have been solved by the later jQuery versions.

Answer 1

Ok, working now. Couple of mistakes on my side:

1. It is crossDomain: true, dataType: "jsonp" , typo - missed capital letters.
2. JSONP requests are not transparent. The data are not simply JSON notation, but have to be wrapped in a Js function call (on the server side): see http://en.wikipedia.org/wiki/JSONP Basically this means, if you cannot modify the sent data, JSONP is not the right option for you.

All things considered, it works. So my personal checklist would be:

1. Use json if possible (e.g. with Chrome, FF, or most likely IE10). Make sure response header is set: Access-Control-Allow-Origin:*
2. If using jsonp, check: async: true, jsonp and crossdomain: true, cache is false, jQuery.support.cors is true These are the prerequisites I have found.
3. Also make sure the jsonp response is a function call (JSON wrapped in function), not "just ordinary" JSON data.

Answer 2

I've had a similar issue trying to access some json that I'm storing on Google Cloud Storage and accessing using jQuery's ajaxing. This worked fine in Chrome and Firefox, but I was getting 'access denied' messages when testing in IE (9 and below).

The way I got around it was to use jsonP, explicitly:

1. re-write my json file to be a javascript file with a javascript variable to hold the json data, e.g.

(function (o) { variableName = [json]; }(window.[nameSpace] = window.[nameSpace]|| {}));

1. include the url to the javascript file within the tag of the html file, e.g.

   <script type="application/javascript" src="[url to javascript file]"></script>

2. Consume the data via it's variableName

Hope this helps :)

Answer 3

IE requires you to use XDomainRequest instead of XHR for cross site.

You can check out the easyXDM which is a js library that abstracts this process for you.

Alternatively see this :

Access denied to jQuery script on IE