CODEWITHSUNDEEP
angularpostasp.net-web-api2
NitinSingh
NitinSingh

Reputation: 2078

WebAPI MethodNotAllowed when CORS enabled

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 = "[email protected]")]
    public int Post([FromBody]Project project)
    {
        lock (this)
        {
            project.Id = projects.Count() + 1;
            projects.Add(project);
            return project.Id;
        }
    }

enter image description here

(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 !!!

Upvotes: 0

Views: 159

Answers (3)

NitinSingh
NitinSingh

Reputation: 2078

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

Upvotes: 0

Roberto Zvjerković
Roberto Zvjerković

Reputation: 10157

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.

Upvotes: 1

Parth Savadiya
Parth Savadiya

Reputation: 1211

In Global.asax.cs file add following code

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

Upvotes: 0

Related Questions