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

About these ads

9 thoughts on “WCF to Jquery 405 Method Not Allowed

  1. Your style is very unique compared to other folks I’ve read stuff from. Thank you for posting when you’ve got the opportunity,
    Guess I’ll just book mark this blog.

  2. Dan says:

    I was pulling my hair out trying to resolve this issue. Most other solutions that I found suggested using a , but I couldn’t get that to work as “*” is not a valid method.

    Your method is much cleaner as it addresses the problem directly and without having to resort to allowing all methods.

    Thank you.

  3. Ram Kr says:

    Thanks Praneeth, it worked for me, I was struggling for a whole day to get it work. Adding customHeaders in web.config did not work, when I added this code into global.asax, it was a charm. Thank you so much.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s