Using Breeze with a WebApi Service from another domain

Question

How can I use an existing webapi service with breeze? Note that my webapi service resides at "server1/api" and the web application is at "server2". I tried changing the service name in the dataservice, but get an XMLHttpRequest Exception 101. This is a cross domain error. Is it possible to use breeze with a webapi service from another domain?

Turd

Answer 1

Cross-origin Breeze Apps

Yes it is possible to get the Breeze client app from one server and have that Breeze app communicate with a data service hosted on a different server.

A Breeze client app runs cross-origin quite well on a CORS-supportive browser when the service is configured for CORS.

Cross-origin issues and CORS solutions are in a more general category of web security problems. They aren't Breeze-specific. We plan to post a topic on CORS + Breeze in the "Cool Breezes" section of the Breeze web site.

---

UPDATE: 10 Dec 2013

This sample uses a primitive CORS implementation that we no longer recommend if you have upgraded to Web API2. Please read this excellent article "CORS Support in ASP.NET Web API 2" which explains basic CORS and how to engage Web API2 CORS support.

The rest of this answer remains as originally written.

---

Todo Sample with CORS

Until then, take a look at the code for the Todo Sample. The server for that sample is setup for CORS, has been deployed to todo.breezejs.com, and you can see it in action by looking at the jsFiddle at the bottom of the Breeze Todo Sample topic page.

Four points of interest:

• App_Start/BreezeSimpleCorsHandler.cs does the work

• App_Start/BreezeWebApiConfig.cs turns it on

// CORS enabled on this server
GlobalConfiguration.Configuration.MessageHandlers.Add(new BreezeSimpleCorsHandler());

• A Web.config line you'll need for IIS7 (not needed for IIS8 or VS2012's IIS Express)

• Scripts/app/dataservice.js is ready to point to a foreign server; see this line:

  // * Cross origin service example * //var serviceName = 'http://todo.breezejs.com/api/todos'; // controller in different origin

Hope that tides you over for now.

Relate

Still no CORS proper end-to-end example? – Galasyn

@DotNetWise, How is the Todo Sample inadequate to this particular purpose? – Relate

You need to manually tweak web.config e.g. removing "OPTIONSHandler" and WebDavModule and then manaualy handle Access-Control-Allow-Origin, Access-Control-Allow-Methods etc. so it would handle properly CORS in WebAPI – Galasyn

Why didn't I have to do that in Todo? Perhaps you are saying that the Todo approach was "improper". That's cool. No hard feelings .... ever :). But would like to know what made it "improper". – Relate

@Relate - I've got a MVC app with Hot Towel for the client side and a WebApi project for the server side. The Metadata request is hitting the server ok (my breakpoints are hit), but I'm getting the folling error on the browser from (index):1 XMLHttpRequest cannot load http://localhost:63017/api/breeze/Metadata. Origin http://localhost:60325 is not allowed by Access-Control-Allow-Origin. I'm following the steps above and still there error. var mgr = new breeze.EntityManager('http://localhost:63017/api/breeze'); – Biamonte

You have a cross-origin problem. Your app is coming from localhost:60325 while the web api is serving from localhost:63017. The easiest fix is to serve both the app assets and the web api from the same origin (same web application). If that isn't possible, you'll have to learn about CORS. – Relate

There was a comment from an anonymous user which I'm not sure would pass the moderation, so I am quoting it here: "This sample uses a primitive CORS implementation that we no longer recommend if you have upgraded to Web API2. Please read this excellent article "CORS Support in ASP.NET Web API 2" which explains basic CORS and how to engage Web API2 CORS support. The rest of this answer remains as originally written." – Kornegay

That was my fault. I wrote that comment I guess w/o signing in. Given that I am the author of the "primitive CORS implementation that we no longer recommend", that makes my judgment authoritative :-) – Relate

Apparently, breeze does not support CORS for custom POST handlers within a breeze controller on WebApi2. I had to move my POST methods to a different controller. I.E. – Disobedience

What should breeze be doing or not doing? My answer would be "breeze is and should do nothing at all about CORS." CORS is (or should be) transparent to the breeze server-side developer as CORS is about HTTP handling well below the application level – Relate