Consuming Web API 2 OData endpoint requiring Windows Authentication with BreezeJS

Question

Has anyone have experience getting Breeze (or DataJS for that matter) to communicate with a Web API 2 OData endpoint which requires Windows Authentication and is hosted on a different server?

I have successfully configured Web API to enable CORS and I am able to initiate a cross-domain request to the OData endpoint using jQuery:

load: function () {
    $.ajax({
        type: "GET",
        dataType: 'json',
        url: "http://services.company.com/odata/GeographicalRegions",
        xhrFields: {
            withCredentials: true
        },
        crossDomain: true
    }).success(function(data) {
        $.each(data.value, function (i, c) {
            my.vm.geographicalRegions.push(new GeographicalRegion().Id(c.Id).Code(c.Code).Name(c.Name));
        });
    });
}

However, attempting to use Breeze always ends up in the following set of errors in Chrome:

> OPTIONS http://services.company.com/odata/GeographicalRegions 401 (Unauthorized) datajs-1.1.3.js:2608
> OPTIONS http://services.company.com/odata/GeographicalRegions No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://project.company.com' is therefore not allowed access. datajs-1.1.3.js:2608
> XMLHttpRequest cannot load http://services.company.com/odata/GeographicalRegions. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://project.company.com' is therefore not allowed access. sample.html:1
> Uncaught #<Object>

I figured the issue was not raised by the BreezeJS library but rather DataJS, so I re-wrote the code to test with DataJS. However, I could not figure out how to tell OData.read to issue the request with the current credentials... So, I tried the next best thing (which I would hope to avoid in a Production environment):

load: function () {
    OData.read({
        requestUri: "http://services.company.com/odata/GeographicalRegions",
        user:"username", 
        password:"password"
    }, function(data) {
        $.each(data.results, function(i, c) {
            my.vm.geographicalRegions.push(new GeographicalRegion().Id(c.Id).Code(c.Code).Name(c.Name));
        });
    });
}

The error remains the same... Any ideas on how to overcome the issue? I'd hate to use jQuery... It is a great library but I was hoping to speed up the development cycle using DataJS.

One MAJOR caveat... Solution must support IE 8 due to customer requirements. That just took JayData out of the running.

Answer 1

IE8 does not support CORS. Could that be the problem?

As you have probably discovered, the standard Breeze OData dataservice adapter delegates to DataJS.

By default DataJS makes its own AJAX calls, talking directly to the browser's XMLHttpRequest unless you substitute your own http client. You might be able to do follow their lead in tweaking the headers per whatever jQuery is doing under the hood.

I never found that jQuery crossDomain config worth a tinker's damn. I spelunked into the crossDomain code a while back and concluded that it couldn't magically make a browser CORS compatible if it isn't CORS compatible.

But if you can make things work with jQuery, you can tell DataJS to use your own jQuery AJAX wrapper. Breeze will never know or care about it.