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?

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.