Breeze.js to ODATA Web API - CORS requests are failing

Question

I am experimenting with Breeze.js queries against ODATA service built on Microsoft Web API 2.

Everything worked as expected when both UI and ODATA controllers lived in the same web application.

Then I decided to put my data service and the web app into separate projects. I installed required CORS packages. My data service is fully functional when I send queries from LinqPad.

However, Breeze is failing to parse arriving response payload.

This is my relevant Console trace:

XHR finished loading: GET "http://localhost:63494/odata/$metadata". (index):1
XHR finished loading: GET "http://localhost:63494/odata/Positions?$filter=(PeriodEndDate%20eq%20dateti…ue%2CCustodianAccountCode%2CCustodianCode%2CSubBusinessUnit%2CStrategyCode".
[Q] Unhandled rejection reasons (should be empty): 
["Error↵    at createError (http://localhost:57299/S…/localhost:57299/Scripts/datajs-1.1.3.js:2587:25)"]
 q.js:989

In debugger I can see that response with data is arriving from the server, but Breeze fails to parse data out of json.

My environment:

On the ODATA server side I have the following relevant packages installed:

On the web application (ODATA client) side I have:

My Controller on ODATA side looks like this:

public class PositionsController : ODataController
    {
        private AG_DWEntities db = new AG_DWEntities();

        public PositionsController()
        {
            db.Database.Log = s => Debug.WriteLine(s);
        }

        // GET odata/Positions
        [EnableQuery]
        public IQueryable GetPositions()
        {
            return db.Positions;
        }

        // GET odata/Positions(5)
        [EnableQuery]
        public SingleResult GetPosition([FromODataUri] string key)
        {
            return SingleResult.Create(db.Positions.Where(position => position.CCY == key));
        }

I use Breeze's EdmBuilder on the data server side (instead of ODataConventionModelBuilder):

private static IEdmModel GetEdmModelModelForBreeze()
        {
            return EdmBuilder.GetEdm();
        }

CORS is enabled by:

config.EnableCors(new EnableCorsAttribute("*", "*", "*", "*"){ SupportsCredentials = true, PreflightMaxAge = long.MaxValue});

In the Web app, query looks like this:

 var serverAddress = "http://localhost:63494/odata/";

               breeze.config.initializeAdapterInstances({ dataService: "webApiOData" });
               var manager = new breeze.EntityManager(serverAddress);
               my.vm = {
                   positions: ko.observableArray([]),                      
                   load: function () {
                       var query = breeze.EntityQuery
                           .from("Positions")
                           .where("PeriodEndDate", "==", new Date(Date.UTC(2014, 0, 30, 0, 0, 0, 0)))
                           .where("Portfolio", "==", "SUPR")
                           .take(200)
                           .orderBy("AGPositionKeyId")
                           .select("ID,Portfolio,AGPositionKeyId,BookEndingMarketValue,CustodianAccountCode,CustodianCode,SubBusinessUnit,StrategyCode");
                       try {
                           manager.executeQuery(query)
                               .then(function(data) {
                                   $.each(data.results, function(i, c) {
                                           my.vm.positions.push(c);
                                       })
                                       .fail(function(e) {
                                           alert(e);
                                       });
                               });
                       } catch (e) {
                           alert(e);
                       };
                   },
                }
                my.vm.load();
                ko.applyBindings(my.vm);

I've seen this post, and tried to inherit my controller from ApiController and use Breeze attribute, but it didn't work either - I started getting different server error.

Thanks for reading my long question!

Volma · Accepted Answer

This answer provided solution to my issue.

From WebApiConfig.cs:

//THIS DOESN'T WORK:
//var cors = new EnableCorsAttribute("*", "*", "*", null) { SupportsCredentials = true };
//NEITHER DOES THIS:
//var cors = new EnableCorsAttribute("*", "*", "*", "*") { SupportsCredentials = true };

//THIS WORKS:
var cors = new EnableCorsAttribute("*","*","*","DataServiceVersion, MaxDataServiceVersion"){SupportsCredentials = true};

config.EnableCors(cors);

These headers on responses are required by datajs: another discussion.

Breeze.js to ODATA Web API - CORS requests are failing

Answers (1)

Related Questions