WCF to Jquery 405 Method Not Allowed

Accessing WCF from Jquery By seeing this first time we think that it is very common thing on developer life, I too started this simple task for just want to know how it works But i got good amount of Knowledge on REST,WCF,Creating Custom Behaviors for WCF Service.

Coming to the problem, I have one simple requirement  i need to call WCF Service from JavaScript(Jquery).

I have one REST Enabled WCF Service hosted on IIS and My Client Application running on ASP.NET Development Server

My Jquery code to call the Service.

$.ajax({
 type: "GET",
 dataType: "json",
 contentType: "application/json",
 url: http://localhost/Services/SampleService.svc/ADD/firstNumber/SecondNumber,
 success: function (msg) {
 alert('Result:' msg);
 },
 error: function (errmsg) {
 alert('error ocured:' + errmsg.responseText);
 },
 complete: function () { alert('completed'); } });
 

on Button click i am calling my service,the interesting point is am able to see the output in IE but not in Chrome and Mozilla
after watching the requests from Fiddler it shows that the call i have made is of type ‘OPTIONS’ i never heard of this before
here am making ‘GET’ call but request going like OPTIONS and the response from Service is “405 Method Not Allowed”
but the Success call back function is executed after some googling i got know this is CORS (Cross Origin Resource Sharing)call
it just CrossDomainAccess then i have added CrossDomainAccessPolicy.xml file on my service but it doesn’t work.

Finally i found one article on Mozilla Developer Network here they said any Cross-Domain(site) HTTP requests first browser will send
‘OPTIONS’ Request called as “Preflight Request”
“preflighted” requests first send an HTTP OPTIONS request header to the resource on the other domain, in order to determine whether
the actual request is safe to send and this request expects appropriate headers saying that service is allowing to access
the service as a Response

to achieve this we have two solutions

1. WCF Custom behaviors
2. Modifying the Global.asax file’s Application_BeginRequest event.

here i am giving solution for Global.asax i.e second one.

to change the ‘OPTIONS’ request with appropriate Response Headers

Add Global.asax file to the project and update Application_BeginRequest  method with this snippet..

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("Cache-Control", "no-cache");
               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();
              }
}

Thats it your client will access the WCF service from Jquery on any browser