WCF error : 405 Method Not Allowed

Question

Going nuts with this issue. I have a solution with 2 projects, one of them is a plain old html with jquery ajax call while the other is a WCF service. The html page will issue a ajax call to the WCF service to get a json string and use it for display purpose.

Now the issue is whenever i run in debug mode, both the html page and the WCF will be started with different port. And this has created a cross-origin issue for me when i perform testing (i.e. getting a 405 Method Not Allowed error with the calling type = OPTIONS in Firefox). I'd triple check the call method on my ajax script and the WCF service is the same (GET).

I'd search google but found that either i have to install a extension or perform some configuration on IIS, which i found cumbersome since what i'm doing is something simple. Following one example, I'd add in the following configuration in my web.config but it didn't work:

    <system.serviceModel>
    <bindings>
      <webHttpBinding>
        <binding name="crossDomain" crossDomainScriptAccessEnabled="true" />
      </webHttpBinding>
    </bindings>
    <behaviors>
      <endpointBehaviors>
        <behavior name="MobileService.webHttpBehavior">
          <webHttp />
        </behavior>
      </endpointBehaviors>
      <serviceBehaviors>
        <behavior name="MyServiceBehavior">
          <serviceMetadata httpGetEnabled="true"  />
          <serviceDebug includeExceptionDetailInFaults="true"/>
        </behavior>
      </serviceBehaviors>
    </behaviors>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
    <services>
      <service name="MobileService.SimpleMemberInfo" behaviorConfiguration="MyServiceBehavior">
        <endpoint address="" binding="webHttpBinding" contract="MobileService.IMemberInfo" bindingConfiguration="crossDomain" behaviorConfiguration="MobileService.webHttpBehavior">
        </endpoint>
      </service>
    </services>
  </system.serviceModel>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET" />
        <add name="Access-Control-Allow-Headers" value="Content-Type, Accept" />
      </customHeaders>
    </httpProtocol>
    <modules runAllManagedModulesForAllRequests="true"/>
    <directoryBrowse enabled="true"/>
    </system.webServer>

Any one has any idea to get rid of this annoying issue?

EDIT: Just to add, I'm running the debug with IIS Express that comes together with the VS Studio 2012

Add in WCF Code and Updated web.config

[ServiceContract]
public interface IMemberInfo
{
    [WebInvoke(Method = "GET",
           BodyStyle = WebMessageBodyStyle.Wrapped,
           ResponseFormat = WebMessageFormat.Json
    )]
    [OperationContract]
    string GetMemberInfoById();
    // TODO: Add your service operations here
}

My Script:

$(document).ready(function () {
    $.ajax("http://localhost:32972/SimpleMemberInfo.svc/GetMemberInfoById", {
        cache: false,
        beforeSend: function (xhr) {
            $.mobile.showPageLoadingMsg();
        },
        complete: function () {
            $.mobile.hidePageLoadingMsg();
        },
        contentType: 'application/json',
        dataType: 'json',
        type: 'GET',
        error: function () {
            alert('Something awful happened');
        },
        success: function (data) {
            var s = "";

            s += "<li>" + data + "</li>";
            $("#myList").html(s);

        }
    });
});

Answer 1

You need to use JSONP for a cross-domain call to get round the browser restrictions, and to update your web.config with crossDomainScriptAccessEnabled set to true to get round server ones. There's a good example in the answer here: how to avoid cross domain policy in jquery ajax for consuming wcf service?

You may also have a problem with GET requests. Try the fixes outlined here: Making a WCF Web Service work with GET requests

Altogether, you want a web.config that looks something like this:

<bindings>
  <webHttpBinding>
    <binding name="crossDomain" crossDomainScriptAccessEnabled="true" />
  </webHttpBinding>
</bindings>
<behaviors>
  <endpointBehavior>
    <behavior name="restBehavior">
      <webHttp />
    </behavior>
  </endpointBehavior>
  <serviceBehavior>         
     <behavior name="MyServiceBehavior">
        <serviceMetadata httpGetEnabled="true"  />
        <serviceDebug includeExceptionDetailInFaults="true"/>
     </behavior>
  </serviceBehavior>
</behaviors>
<services>
  <service name="..." behaviorConfiguration="MyServiceBehavior">
    <endpoint address="" binding="webHttpBinding" bindingConfiguration="crossDomain" 
              contract="..." behaviorConfigurations="restBehavior" /> 
  </service>
</services>

(Note that both the service and the endpoint have behaviours attached, allowing webHttp calls and httpGet calls respectively, and that the binding has crossDomain access explicitly enabled).

... a service method decorated like this:

[ServiceContract]
public interface IMyService
{
    [WebGet] // Required Attribute to allow GET
    [OperationContract]
    string MyMethod(string MyParam);
}

... and a client call using JSONP:

<script type="text/javascript">
$(document).ready(function() {
    var url =  "...";
    $.getJSON(url + "?callback=?", null, function(result) { // Note crucial ?callback=?
       // Process result
    });
});
</script>

Answer 2

However its an old thread, but I would like add my comment about the problems I faced and the solution I got for working of CORS. I am developing a web service in the following environment:

1. WCF web service.
2. .NET 3.5 framework.
3. Added wcf web service into existing asp.net website.
4. Visual Studio 2008

Most of the people mentioned about adding the crossDomainScriptAccessEnabled attribute in tag under <webHttpBinding> in web.config. I am not sure this works or not but its not available in 3.5 version, so I had no choice. I also found that adding the following tags in web.config will work...

<httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Methods" value="GET" /> <add name="Access-Control-Allow-Headers" value="Content-Type, Accept" /> </customHeaders> </httpProtocol>

but no luck...kept getting 405 method not allowed errors

After struggling a lot with these options I found another solution to add these headers in global.asax file dynamically as per the given below...

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, Authorization");
        HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
        HttpContext.Current.Response.End();
    }
}

And remove the from web.config. Publish the website and continue to client side jquery/ajax...and you will get the data from api calls. Good Luck!

Answer 3

What worked for me was enabling WCF related features of IIS :