WebAPI MethodNotAllowed when CORS enabled

Question

I am hitting my WebAPI 2.0 Post method from Angular 5 component. The WebAPI has CORS enabled (shows in Response tab of Chrome), yet upon hitting it, shows as MethodNotAllowed. Not sure whats wrong in here. Authentication is using the bearer token. Postman hit is proper. Yet unable to hit the api when through angular

  private PopulateHeaders() {
    this.userIdAuthToken = localStorage.getItem(this.authToken);

    let headers = new HttpHeaders({
      'Content-Type': 'application/json'
    });

    //   Once security is implemented, add the token here 
    if (this.userIdAuthToken)
      headers.append('Authorization', 'Bearer ' + this.userIdAuthToken);

    this.httpOptions = {
      headers: headers
    };
  }

  postProject(name: string, details: string): Observable<HttpEvent<Project>> {
    var data = { name: name, details: details };

    this.PopulateHeaders();

    let saveRequest = this._http.post<Project>(
      this.apiUrl + '/project' + '/post',
      JSON.stringify(data),
      this.httpOptions);

    return saveRequest;
  }

WebAPI code

    [Authorize(Users = "admin@myapp.com")]
    public int Post([FromBody]Project project)
    {
        lock (this)
        {
            project.Id = projects.Count() + 1;
            projects.Add(project);
            return project.Id;
        }
    }

(Just to mention) I am using OWIN authentication here, and my startup file has following:-

        public void Configuration(IAppBuilder app)
        {
            // CORS has to be set first in order for it to be enabled for OWIN

            app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

            this.ConfigureOAuthTokenGeneration(app);

            this.ConfigureOAuthTokenConsumption(app);

            this.ConfigureWebApi();

            app.UseWebApi(HttpConfiguration);
}

If I have the "UseCors" call as first, the web api reports cors failure, If I add it to after oauth, it reports cors error on OAuth... Not sure where to set it up !!!

try with Fiddler, it will give you exact error. I think, the parameters are not same as per API Method expectation. — Ghazni, Apr 10 '18 at 10:59
Are you sure its a POST api method? it could be GET. Check your API once. — Akanksha Gaur, Apr 10 '18 at 11:04
Another point being, if i remove the authorization header, it leads to failed authentication in the WebAPI (so service hit is attempted) — NitinSingh, Apr 10 '18 at 11:31

score 1 · Answer 1 · answered Apr 10 '18 at 11:40

You have to enable OPTIONS http method on server side. Add this to your <handlers></handlers> field in Web.config:

<!-- Enable OPTIONS http request-->
<remove name="OPTIONSVerbHandler" />
<add name="OPTIONSVerbHandler" path="*" verb="OPTIONS" modules="ProtocolSupportModule" resourceType="Unspecified" requireAccess="Script" />

OPTIONS is sent before every post and put request, and it's disabled by default.

score 0 · Answer 2 · answered Apr 10 '18 at 11:11

0

In Global.asax.cs file add following code

protected void Application_BeginRequest()
{
    if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
    {
        Response.Flush();
    }
}

answered Apr 10 '18 at 11:11

Parth Savadiya

1,203
3
18
40

No difference made. Leads to "net::ERR_CONNECTION_RESET" – NitinSingh Apr 10 '18 at 11:15

score 0 · Accepted Answer · answered Apr 10 '18 at 13:38

Ultimately, this post helped me owin cors or web api cors

There was no need to update following:-

app.UseCors (since the CustomOAuthProvider already set up Cors for all)
WebAPI needed to use Cors so best way to inject was via WebAPI.Cors Nuget and EnableCors method..
No change in web.config for OPTIONS or header (access-control-*)

Final changes

(WebAPI.Config) * works for all

var cors = new System.Web.Http.Cors.EnableCorsAttribute("*", "*", "*"); 
config.EnableCors(cors);

Startup

  public void Configuration(IAppBuilder app)
    {
        // **No longer required**
        // app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

        this.ConfigureOAuthTokenGeneration(app);

        this.ConfigureOAuthTokenConsumption(app);

        this.ConfigureWebApi();

        app.UseWebApi(HttpConfiguration);

        // No further configuration is now allowed. 
        HttpConfiguration.EnsureInitialized();
    }

Thanks everyone for your support and help

WebAPI MethodNotAllowed when CORS enabled

3 Answers3