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?

Arindam Nayak · Accepted Answer · 2014-10-19 06:21:11Z

3

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:

Install this - Install-Package Microsoft.AspNet.WebApi.Cors using NuGet
Open the file App_Start/WebApiConfig.cs. Add the following code to the WebApiConfig.Register method.
Next, add the [EnableCors] attribute to the Controller class:

With following params

[EnableCors(origins: "your_domain", headers: "*", methods: "POST")]
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

edited Oct 19, 2014 at 6:21

answered Oct 19, 2014 at 6:02

Arindam Nayak

7,4924 gold badges36 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Arindam Nayak Over a year ago

For CORS request, PUT , POST, DELETE does not works , straight forward, it will 1st send you 405 OPTIONS request, then you have to respond to that will the above header, after that it will work. I have already answered this - stackoverflow.com/questions/25889599/…, But this is for WCF, i am looking for WebAPI, will post that shortly.Are you also sending this Access-Control-Allow-Methods: POST header?

Sayak Banerjee Over a year ago

Is there a way to do this from IIS? I tried adding them to IIS but they have no effect. However, they work like a charm when I add them to the webAPI code.

Arindam Nayak Over a year ago

You need to set some of attributes to post methods, such as methods, headers , then it should work.

TechQuery Over a year ago

@ArindamNayak, If CORS is enabled by EnableCorsAttribute("*", "*", "*");, then is it mandatory to do specify "POST" explictly?? Also, i tried to enable it in web.config, that doesnt work.. any explanations for it?

Arindam Nayak Over a year ago

@TechQuery, some browser don't like origins = *, may be for a security risk, you need to specify exact domain. Regarding methods, post, put, delete as unsafe method, so that go through CORS.

|

Ibere Spadoto · Accepted Answer · 2016-11-07 23:32:31Z

0

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

<system.webServer>
  <handlers>

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

answered Nov 7, 2016 at 23:32

Ibere Spadoto

17113 bronze badges

Collectives™ on Stack Overflow

Angular.js $resource with ASP.Net webapi?

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related