从AngularJS $ http调用POST WEBAPI时出现错误405（不允许使用方法）？

Question

I have WEBAPI project and AngularJS client side project. $http.get calls are working fine and also $http.post calls with null data are working but with data its throwing error '405 (Method Not Allowed)'.I have enabled CORS too. Please provide solution.

I have added following things in web.config

 <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" />
      <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />
     <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />

      <add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS,XYZ" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" />
      <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS,XYZ" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>



<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>

This is the WEBAPI

[HttpPost] public bool SubmitQuesiton(JObject data) { return Factory.SubmitQuestion(data); }

This is AngularJS code

data = JSON.stringify(data);
        $http({
            method: 'POST',
            url: "http://localhost:53546/api/demo/SubmitQuesiton",
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            data: data
        })

Answer 1

Answering own question. Issue is due CORS, it should be enabled in WEBAPI project. The CORS enabling not works through WEB.config code, you need to enable CORS through backend.

Note - remove all web.config CORS enabling code if its there in web.config ie the below code

<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>

Steps 1. Install CORS package Install-Package Microsoft.AspNet.WebApi.Cors for WEBAPI project 2. In WebApiConfig.cs add this code

var corsAttribute = new EnableCorsAttribute("*","Origin, Content-Type, Accept",
                                               "GET, PUT, POST, DELETE, OPTIONS");
            config.EnableCors(corsAttribute);

Done.