Fetching value from post request gives Method not allowed

Question

I am sorry to ask a similar frustrating question again but i am not able to configure a http POST request to a Web API 2 from Angular2

fetchBattingAverage() {
    let str = JSON.stringify({"foo": "bar"});
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });


    // JSON.stringify({ "abc": "def" })
    return this._http.post(
      this.baseURL + 'getBatting',
      str,
      options
    )
      .map(res => res.json());
  }

Web API 2: web config

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="*" />
    <add name="Access-Control-Allow-Methods" value="*" />
  </customHeaders>
</httpProtocol>

Web APi 2.2 Controller:

[RoutePrefix("api")]
public class SachinController : ApiController
{
        [HttpPost]
        [Route("getBatting")]
        [EnableCors(origins: "*", headers: "*", methods: "*")]
        public IHttpActionResult Post([FromBody] string countries)
        {
            // Do something
            return Ok()
        }

Error Message:

OPTIONS http://localhost:54094/api/getBatting 405 (Method Not Allowed)
Response for preflight has invalid HTTP status code 405

Request Headers:

OPTIONS /api/getBatting HTTP/1.1
Host: localhost:54094
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
DNT: 1
Referer: http://localhost:4200/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8

Take a look at https://stackoverflow.com/questions/20079813/how-to-make-cors-authentication-in-webapi-2/25758949#25758949 — sideshowbarker, Feb 08 '17 at 18:55
Removing the custom headers leads to message: "request pass access control check: NO ' Access-Control-Allow-Origin' header is present on the requested resource. Thanks for the link anyways. — Manmeet S. Oberoi, Feb 08 '17 at 19:11
So by removing the custom headers in the request you’ve avoided the need for the browser to send an OPTIONS request but if you’re still getting “no 'Access-Control-Allow-Origin' header is present on the requested resource”, then your server config is clearly not yet working as expected, so see my answer or just try the steps in the answer at https://stackoverflow.com/questions/20079813/how-to-make-cors-authentication-in-webapi-2/25758949#25758949 — sideshowbarker, Feb 09 '17 at 01:21

score 0 · Accepted Answer · answered Feb 09 '17 at 15:36

Apparently there is another property in Web.Config which needs to be removed.

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

Fetching value from post request gives Method not allowed

1 Answers1