Angular.js $resource with ASP.Net webapi?

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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. i.e. 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

Method 2

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

<system.webServer>
  <handlers>

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0