Angular.js $resource with ASP.Net webapi?

Question

I have a simple ASP.Net WebAPI service that assigns a static variable on POST/PUT and returns the value on GET:

private static State Repo = null;

public State Get()
{
    return Repo;
}

public void Post(State value)
{
    Repo = value;
}

public void Put(State value)
{
    Repo = value;
}

And I have an angular-resource defined like so:

var stateService = angular.module('StateService', ['ngResource']);

stateService.factory('State', function ($resource) {
    return $resource('http://localhost:8080/API/State');
});

When I try to do this:

State.get(function (state) {
    $scope.data = state.data !== undefined ? state.data : '[Not Set]';

    state.data = "newvalue";
    state.$save();
});

The get() works fine, but the $save() throws this error in chrome:

XMLHttpRequest cannot load http://localhost:8080/API/State. Invalid HTTP status code 405 

The webAPI already has CORS enabled (returns Access-Control-Allow-Origin: * ). What am I missing?

Answer 1

For some CORS requests, the browser sends an additional request, called a “preflight request”, before it sends the actual request for the resource.

The pre-flight request uses the HTTP OPTIONS (405 status code) method. It includes two special headers:

• Access-Control-Request-Method: The HTTP method that will be used for the actual request.
• Access-Control-Request-Headers: A list of request headers that the application set on the actual request. (Again, this does not include headers that the browser sets.)

Even if you had made it CORS enabled, and it is working for GET request and you have told it is showing 405 HTTP Status for POST request. This is because, POST,PUT,DELETE request are not safe request, they first send request OPTIONS request, you have to respond to that will required hedaers such as Access-Control-Allow-Origin: * , Access-Control-Allow-Methods: POST , and then it will again send POST request , and it will work then.

Please verify what are the headers you are sending in response. ie To make successful CORS POST request, atleast you have to send Access-Control-Allow-Methods: POST along with Access-Control-Allow-Origin: * .

Steps to make it CORS enabled:

1. Install this - Install-Package Microsoft.AspNet.WebApi.Cors using NuGet
2. Open the file App_Start/WebApiConfig.cs. Add the following code to the WebApiConfig.Register method.

3. Next, add the [EnableCors] attribute to the Controller class:

   With following params

   [EnableCors(origins: "your_domain", headers: "*", methods: "POST")]

4. Redeploy your WebAPI project.

SOURCE - http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

More links - http://www.codeproject.com/Articles/742532/Using-Web-API-Individual-User-Account-plus-CORS-En

Answer 2

On Web.config, comment the line <remove name="OPTIONSVerbHandler" /> at

<system.webServer>
  <handlers>

If you are using CORS config by web.config file.