How to make WCF Services compatible with HTTP Requests

WCF Services compatibility Guide

Introduction

This Guide detail changes to server-side WCF service definition for HTTP compatibility. The Silverlight to Angular tool do not process server side projects. These projects need manual changes to make

A simple example

Say that we want to make the following WCF service available to an TypeScript/Angular application:

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class MyService
{​​​​
   [OperationContract]
   public string DoWork()
   {​​​​
      return "Dummy string";
   }​​​​
}

It's possible that this service is configured in the web.config configuration file of the site. Here's an example configuration:

<system.serviceModel>
    <behaviors>
        <serviceBehaviors>
            <behavior name="">
                <serviceMetadata httpGetEnabled="true" httpsGetEnabled="true" />
                <serviceDebug includeExceptionDetailInFaults="false" />
            </behavior>
        </serviceBehaviors>
    </behaviors>
    <bindings>
        <customBinding>
            <binding name="SimpleSLApp.Web.MyService.customBinding0">
                <binaryMessageEncoding />
                <httpTransport />
            </binding>
        </customBinding>
    </bindings>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true"
        multipleSiteBindingsEnabled="true" />
    <services>
        <service name="SimpleSLApp.Web.MyService">
            <endpoint address="" 
                      binding="customBinding" 
                      bindingConfiguration="SimpleSLApp.Web.MyService.customBinding0"
                      contract="SimpleSLApp.Web.MyService" />
            <endpoint address="mex" 
                      binding="mexHttpBinding" 
                      contract="IMetadataExchange" />
        </service>
    </services>
</system.serviceModel>

To make this service available to an Angular application you need to follow the steps described in the following sections:

Step #1: Change service configuration

The first step is to change the configuration of the service to specify that it is exposed as a JSON web service. These changes will leave the service available to both the Silveright application and the Angular application. The changes are:

1. Add an endpoint configuration to the service section of MyService

      <endpoint address="json" 
                binding="webHttpBinding"  
                behaviorConfiguration="jsonBehavior" 
                contract="SimpleSLApp.Web.MyService"/>

2. Add an endPointBehavior to the behaviors section of the system.serviceModel main section:

      <endpointBehaviors>
        <behavior name="jsonBehavior">
          <enableWebScript/>
        </behavior>
      </endpointBehaviors>

The final result:

<system.serviceModel>
    <behaviors>
        <serviceBehaviors>
            <behavior name="">
                <serviceMetadata httpGetEnabled="true" httpsGetEnabled="true" />
                <serviceDebug includeExceptionDetailInFaults="false" />
            </behavior>
        </serviceBehaviors>
      <endpointBehaviors>
        <behavior name="jsonBehavior">
          <enableWebScript/>
        </behavior>
      </endpointBehaviors>

    </behaviors>
    <bindings>
        <customBinding>
            <binding name="SimpleSLApp.Web.MyService.customBinding0">
                <binaryMessageEncoding />
                <httpTransport />
            </binding>
        </customBinding>
    </bindings>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true"
        multipleSiteBindingsEnabled="true" />
    <services>
        <service name="SimpleSLApp.Web.MyService">
            <endpoint address="" 
                      binding="customBinding" 
                      bindingConfiguration="SimpleSLApp.Web.MyService.customBinding0"
                      contract="SimpleSLApp.Web.MyService" />
            <endpoint address="mex" 
                      binding="mexHttpBinding" 
                      contract="IMetadataExchange" />
          <endpoint address="json" 
                    binding="webHttpBinding"  
                    behaviorConfiguration="jsonBehavior" 
                    contract="SimpleSLApp.Web.MyService"/>
        </service>
    </services>
</system.serviceModel>

Please notice that services may also be configured in C# code (not in Web.config). More documentation is required for this scenario.

Step #2 Add attributes to identify web operations

The next step is to add attributes to the web operations as needed for example:

using System.ServiceModel.Web;

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class MyService
{​
   [OperationContract]
   [WebGet]
   public string DoWork()
   {​
      return "Dummy string";
   }​
}

Here we used the WebGet attribute to specify that the DoWork operation can be used with the HTTP GET verb.

Using the service

With these changes the service could be reached using an HTTP request to the same added, but adding a /json section to the URL. For example: The original Silverlight app was making the following request:

http://localhost:1388/MyService.svc

The TypeScript/ Angular will need to do the same request to the following address:

http://localhost:1388/MyService.svc/json/DoWork

When to use POST

There are some scenarios that will work ok by using Get (using argument types like strings, booleans, numbers, any argument that you can send in the request url), but when you need to pass complex objects you will need to use Post.

Instead of adding the [WebGet] attribute to the web operation, you will need to add the following:

[OperationContract]
//// Adding this configuration to be able to use the service from the angular application
[System.ServiceModel.Web.WebInvoke(
    Method = "POST",
    ResponseFormat = System.ServiceModel.Web.WebMessageFormat.Json,
    RequestFormat = System.ServiceModel.Web.WebMessageFormat.Json,
    BodyStyle = System.ServiceModel.Web.WebMessageBodyStyle.WrappedRequest)]
public IList<CustomerDTO> GetCustomers()
{
    return Data.GetCustomers();
}

Enabling CORS on WCF

Sometimes, it's useful to configure IIS to accept CORS call to debug some issue invoking the services. To do this you need to add the following code to the Global.asax.cs file of the website:

protected void Application_BeginRequest(object sender, EventArgs e)
 {​
     HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
     if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
     {​
           HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
           HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
           HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
           HttpContext.Current.Response.End();
     }​
}

*Please be aware that this must be removed for production code*. Also it seems that Chrome doesn't allow making this requests . Use Firefox for debugging this code until we find a solution for this.