Cross-domain jquery ajax call : How to implement CORS for WCF

First, I changed my AJAX calls (GET / POST) from json to jsonp.

$.ajax({ type: 'GET', url: url, dataType: 'json', data: parameters, headers: { "cache-control": "no-cache" }, success: function (response, status, xhr) { successCallback(response, status, xhr); }, error: function (xhr, status, error) { errorCallback(xhr, status, error); } });

$.ajax({ type: 'POST', url: url, dataType: 'json', contentType: 'application/json', processData: false, data: parameters, headers: { "cache-control": "no-cache" }, success: function (response, status, xhr) { successCallback(response, status, xhr); }, error: function (xhr, status, error) { errorCallback(xhr, status, error); } });

became :

$.ajax({ type: 'GET', url: url, dataType: 'jsonp', data: parameters, headers: { "cache-control": "no-cache" }, success: function (response, status, xhr) { successCallback(response, status, xhr); }, error: function (xhr, status, error) { errorCallback(xhr, status, error); } });

$.ajax({ type: 'POST', url: url, dataType: 'jsonp', contentType: 'application/json', processData: false, data: parameters, headers: { "cache-control": "no-cache" }, success: function (response, status, xhr) { successCallback(response, status, xhr); }, error: function (xhr, status, error) { errorCallback(xhr, status, error); } });

That way worked but I had a problem with the encoding of the data I received. Then I added for GET requests :

scriptCharset: 'utf-8'

It became :

$.ajax({ type: 'GET', url: url, dataType: 'jsonp', scriptCharset: 'utf-8', data: parameters, headers: { "cache-control": "no-cache" }, success: function (response, status, xhr) { successCallback(response, status, xhr); }, error: function (xhr, status, error) { errorCallback(xhr, status, error); } });

Everything was fine... until I tried a POST request. It worked before but now I received : Method not allowed.

Nothing to do until I tried to implement CORS for my WCF. It was a very simple solution that worked.

Here's how I did :

1. Add a Global.asax to your WCF application.

2. In "Application_BeginRequest", add the following code :

HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);

HttpContext.Current.Response.Cache.SetNoStore();

// Enable Crossdomain Ajax calls

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();

}

3. Come back with the first version of the Ajax call and remove the headers property :

$.ajax({ type: 'GET', url: url, dataType: 'json', data: parameters, success: function (response, status, xhr) { successCallback(response, status, xhr); }, error: function (xhr, status, error) { errorCallback(xhr, status, error); } });

$.ajax({ type: 'POST', url: url, dataType: 'json', contentType: 'application/json', processData: false, data: parameters, success: function (response, status, xhr) { successCallback(response, status, xhr); }, error: function (xhr, status, error) { errorCallback(xhr, status, error); } });

That did the trick for me...