Access is denied with IE and the datasource

[Dave]

Attempting to use the Kendo DataSource object to call a WebAPI controller in another project. This is a cross-domain call. I am able to get this to work when using $.ajax directly but it get a "access is denied" error when using the DataSource. Here's the setup:

jQuery.support.cors = true;

 

function sendRequestKendo(url) {

    ds = new kendo.data.DataSource({

        transport: {

            read: {

                url: url,

                type: "GET"

            }

        },

        change: onDataChanged,

        error: function(response) {

            alert(response.errorThrown);

            $("#loginError").show();

        }

    });

    ds.read();

}

 

function onDataChanged() {

    $("#results").html(kendo.stringify(ds.view()));

}

I have the following in the web.config of the API project to allow cross-domain calls:

<httpProtocol>

  <customHeaders>

    <add name="Access-Control-Allow-Origin" value="http://mydomain.com" />

    <add name="Access-Control-Allow-Headers" value="Content-Type" />

  </customHeaders>

</httpProtocol>

The error handler is called and the response.errorThrown is "Access is denied". I can get around this by changing the security setting in IE Internet Options / Security / Internet Zone / Custom Level / Miscellaneous / Allow data sources across domains. However, this will NOT be allowed in production. It works okay in Chrome and Firefox but not IE9.  Again, if I do a straight ajax call it works:

$.ajaxSetup({

    type: "GET",

    contentType: "application/json; charset=utf-8",

    dataType: "json"

});

$.ajax({

    url: url,

    success: function() {

    },

    error: function(response, status, err) {

        $("#loginError").show();

        $("#errorMessage").html(err);

    }

});

Any ideas?