Response for preflight has invalid HTTP status code 405

Question

I have read many similar problems in StackOverflow, but the solutions doesn't work for me.

I have WCF REST service:

[<OperationContract>]    
    [<WebInvoke(UriTemplate = "PostItem", 
            RequestFormat= WebMessageFormat.Json,   
            ResponseFormat = WebMessageFormat.Json, Method = "POST")>]         

I can use it using Postman (Chrome extension). I am passing data as 'raw', not 'urlencoded'. And I get 200 return code.

I need to call this method using angularjs:

    $http.post('http://192.168.1.65/Service1.svc/restapi/PostItem',                   
                {
    "Address": "г. Москва, ул. Соколово-Мещерская, д.25",
     ...
    "User": ""
      })  

I have just copied URL and JSON from Postman. But I get the error:

angular.js:10722 OPTIONS http://192.168.1.65/Service1.svc/restapi/PostItem http://192.168.1.65/Service1.svc/restapi/PostItem. Response for preflight has invalid HTTP status code 405

I have searched similar problems and have found two solutions:

1. Use jQuery to set header Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', but it doesn't work with my WCF service

2. Set custom headers in my Web.Config:

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

It doesn't help me. And I am not sure that the reason of the error on the server side. The Postman extension can call this method succesfully.

How can I make the same POST call using AngularJS ?

Update:

Here is OPTIONS request:

Review and Response tabs are empty

Update 2:

All works fine in IE, but doesn't work in Chrome.

Answer 1

I want to show what work for me.

First you must enable CORS on web.config (like Mihai sad):

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

If you have some extra HEADER parameter, you must add it to Access-Control-Allow-Headers, like:

<add name="Access-Control-Allow-Headers" value="Content-Type, X-Your-Extra-Header-Key" />

And finally, to handle OPTIONS requests you must reply with empty response, adding in your application class:

protected void Application_BeginRequest()
{
    if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
    {
        Response.Flush();
    }
}

Answer 2

Although this already has an answer, but heres my solution. In the web config you have to remove the instruction to <remove name="OPTIONSVerbHandler" />

First add in the customHeaders

<httpProtocol>
  <!-- THESE HEADERS ARE IMPORTANT TO WORK WITH CORS -->
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Methods" value="POST, PUT, DELETE, GET, OPTIONS" />
    <add name="Access-Control-Allow-Headers" value="content-Type, accept, origin, X-Requested-With, X-Authentication, name" />
  </customHeaders>
</httpProtocol>

Then either comment out or delete the instruction to remove the OPTIONSverbHandler

<handlers>
  <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  <!-- <remove name="OPTIONSVerbHandler" /> -->
  <remove name="TRACEVerbHandler" />
  <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>