Configuring Breeze web client to connect to remote breeze server with CORS support

Question

We are envisioning a product that will have a web front end and mobile apps on multiple platforms (Xamarin). I've already turned a breeze angular hot towel example into a web front end. I am tasked with investigating splitting apart the breeze web client and the breeze server back end. The main reason for this is the mobile devs could potentially use breeze sharp to save their objects to the same breeze back end. It seems like a bad idea to have the breeze web client and server coupled so tightly. I duplicated the project and stripped out the necessary parts on each end to decouple them.

The part I can't figure out is how to get them to talk to each other again. I briefly looked into connectionString, but that doesn't seem to be the right answer. Any ideas on how to get them talking again would be appreciated.

---

Edit: 20140725 14:23

I've been trying to resolve this on and off since yesterday. I looked into connectionStrings in Web.config and found that that was dead end. Another post made me think that appSettings in Web.config.

I found a parameter in config.js named remoteServiceName. The previous value was "breeze/Breeze" I changed it to

'http://localhost:4545/breeze/Breeze' 

The web client still fails:

Error retrieving data.Metadata query failed for: http://localhost:4545/breeze/Breeze/Metadata; HTTP response status 0 and no message. Likely did not or could not reach server. Is the server running? Error: Metadata query failed for: 'http://localhost:4545/breeze/Breeze/Metadata'; HTTP response status 0 and no message. Likely did not or could not reach server. Is the server running?'

When I run that link in its own tab I get metadata.

---

What did I strip out?: The breeze controller, models, repository (c# only), dbcontext, and BreezeWebApiConfig

---

Edit 20140725 14:52

Sorry I missed the exception before the one mentioned above:

XMLHttpRequest cannot load http://localhost:4545/breeze/Breeze/Metadata. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:53555' is therefore not allowed access. 

Answer 1

Thank you to everyone for the clues you provided in the comments!

The first part of the answer I already included in my edits above:

I found a parameter in config.js named remoteServiceName. The previous value was "breeze/Breeze" I changed it to

'http://localhost:4545/breeze/Breeze' 

That got the client talking attempting to talk to the remote server.

After that the CORS issue stumped me. The three following links helped me solve this issue:

Using Breeze with a WebApi Service from another domain WebAPI CORS and Ninject http://msdn.microsoft.com/en-us/magazine/dn532203.aspx

You have to install the CORS packages. From the microsoft article:

First, in order to get the CORS framework, you must reference the CORS libraries from your Web API application (they’re not referenced by default from any of the Web API templates in Visual Studio 2013). The Web API CORS framework is available via NuGet as the Microsoft.AspNet.WebApi.Cors package. If you’re not using NuGet, it’s also available as part of Visual Studio 2013, and you’ll need to reference two assemblies: System.Web.Http.Cors.dll and System.Web.Cors.dll (on my machine these are located in C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Stack 5\Packages).

The next step was to add a few lines to the config file from the webapi-cors-and-ninject stackoverflow post:

 <system.webServer>
<handlers>
</handlers>
<httpProtocol>
  <customHeaders>
    <!-- Adding the following custom HttpHeader will help prevent CORS from stopping the Request-->
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
  </customHeaders>
</httpProtocol>

Obviously this is a very insecure solution and shouldn't be used for anything other than a development environment.