OPTIONS 405 (Method Not Allowed) web api 2

Question

I have created a web api 2 and I'm trying to do a cross domain request to it but I'm getting the following error:

OPTIONS http://www.example.com/api/save 405 (Method Not Allowed)

I have had a look around and most resolutions for this problem are saying that I need to install CORs from NuGet and enable it so I have installed the package and marked my controller with

[EnableCors("*", "*", "*")]

But this still hasn't resolved the problem.

My ApiController only has the following Save method in:

[ResponseType(typeof(int))]
public IHttpActionResult Save(Student student)
{
    if (ModelState.IsValid)
    {
        using (StudentHelper helper = new StudentHelper())
        {
            return Ok(helper.SaveStudent(student));
        }
    }
    else
    {
        return BadRequest(ModelState);
    }
}

This is my js from a different domain:

$.ajax({
    type: "POST",
    crossDomain: true,
    data: JSON.stringify(student),
    crossDomain: true,
    url: 'http://www.example.com/api/save',
    contentType: "application/json",
    success: function (result) {
        console.log(result);
    }
});

Is there something else I need to do to enable this?

Answer 1

Via nuget make the installation of the CORS web API package for your project:

Install-Package Microsoft.AspNet.WebApi.Cors

In WebApiConfig add the following lines:

var cors = new EnableCorsAttribute ("*", "*", "*");
config.EnableCors (cors);

Answer 2

Ensure that you have OPTIONS as one of the allowed verb in your web.config and that it's being handled by the default handler.

<system.web>
...
  <httpHandlers>
  ... 
    <add path="*" verb="OPTIONS" type="System.Web.DefaultHttpHandler" validate="true"/>
    <add path="*" verb="TRACE" type="System.Web.DefaultHttpHandler" validate="true"/>
    <add path="*" verb="HEAD" type="System.Web.DefaultHttpHandler" validate="true"/>

Answer 3

This one solved my problem

Step 1

Install the Cors package Microsoft.AspNet.WebApi.Cors (Right Click Solution > Manage Nuget Package > And Then Search for Cors)

Step 2

put this line in the WebApiConfig.cs file

public static void Register(HttpConfiguration config)
{
    config.EnableCors(new EnableCorsAttribute("http://localhost:3000", headers: "*", methods: "*"));        
    .
    .
    .        
} 

Change http://localhost:3000 to the address of the API Caller

Answer 4

In the end I have solved this by changing the ajax request. I found out that the OPTIONS preflight is only sent in certain situations - one of them being if the request contains a Content-Type that is not one of the following types:

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

So by removing the content-type in my ajax request and changing it to the following:

$.ajax({
    type: "POST",
    crossDomain: true,
    data: student,
    dataType: 'json',
    url: 'http://www.example.com/api/save',
    success: function (result) {
        console.log(result);
    }
});

I was able to get it working.

This page has useful information about simple requests and how to avoid preflight requests

Answer 5

Also try using the withcredentials ajax request option

    $.ajax({
     type: "POST",
     crossDomain: true,
     data: JSON.stringify(student),
     withCredentials: true,
     url: 'http://www.example.com/api/save',
     contentType: "application/json",
     success: function (result) {
      console.log(result);
     }
   });