ajax wcf post,How to handle Ajax JQUERY POST request with WCF self-host

There are many reasons create a RESTful WCF server (it is easy) and even better if you can avoid ASP and it's security box (if all you are doing is simple requests to return information). See: http://msdn.microsoft.com/en-us/library/ms750530.aspx on how to do this.

What I found is that handling AJAX (JQUERY) GET requests is easy. But dealing with JSON in a POST is tricky.

Here is an example of a simple GET request contract:

[OperationContract]

[WebGet(ResponseFormat = WebMessageFormat.Json)]

String Version();

And the implementaion is here (which returns a JSON)

public partial class CatalogService : ICatalogService

{

public String Version()

{

mon.IsActive = true;

this.BypassCrossDomain();

ViewModel.myself.TransactionCount++;

return ViewModel.myself.VersionString;

}

}

Ah, but what if you want to POST some JSON. You will find lots of articles on stack overflow that tell you all you have to do is this:

[OperationContract]

[WebInvoke(Method = "POST", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]

BuildResponse BuildToby(BuildRequest request);

which will receive a JSON message, de-serialize into a Plain .NET object (PONO) and let you work with it. And indeed, this worked fine when I constructed the request in Fiddler.

POST /BuildToby HTTP/1.1

User-Agent: Fiddler

Content-Type: application/json

Host: localhost:4326

Content-Length: 1999

However, when you use the following AJAX in JQUERY 1.8, you will find a SURPRISE:

It by specifying content-type of "application/json" you will find that there is a "preflight" check that is fired off by the browser to see if you are allowed to POST something other than a www-url-encloded post message. (there are notes in stack overflow about this).

var request = JSON.stringify({ FrameList: ExportData.buildList });

var jqxhr = $.ajax({

type: "POST",

url: "http://localhost:4326/BuildToby",

data: request,

contentType: "application/json; charset=utf-8",

dataType: "json"

});

and here is what fiddler reports: (Note it is not a POST message, but a OPTIONS message).

OPTIONS http://localhost:4326/BuildToby HTTP/1.1

Host: localhost:4326

User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:19.0) Gecko/20100101 Firefox/19.0

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: en-US,en;q=0.5

Accept-Encoding: gzip, deflate

Origin: http://ysg4206

Access-Control-Request-Method: POST

Access-Control-Request-Headers: content-type

Connection: keep-alive

Pragma: no-cache

Cache-Control: no-cache

What has happened is that a browser (in this case Firefox) has to make a extra call to the server, with a OPTIONS HTTP message, to see if a POST is allowed (of this content type).

All the articles about fixing this are about editing GLOBAL.ASAX which is fine if you are in ASP.NET but are useless if you are doing a self-host WCF.

So now you see the question (sorry for being so long winded, but I wanted to make this a complete article so that others can follow the results).