Response for preflight has invalid HTTP status code 404 - Angular 4 and Web API 2

Question

In the service I am calling Web API(2)(hosted on different server than the front end angular 4 application) action method in order to retrieve some info.

The action method needs authorization which I am doing using access token that I receive after logging into the application. Now, the code works fine in Microsoft edge, however gives me preflight error in chrome which I guess is CORS issue. Not sure how to resolve this. Can someone help me with this?

Here is my code;

 getCompanyInfo(id: string) {
  let headers = new Headers({
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      'Authorization': 'Bearer ' + this.commonService.accessToken
    });
  let options = new RequestOptions({ headers: headers });
  let getRequestUrl = this.commonService.baseUrl + 'api/getCompanyInfo';

    return this.http.get(getRequestUrl + '/' + id, options)
      .map((res: any) => <CompanyInfoModel>res.json())
      .do(response => console.log(response))
      .catch(this.commonService.handleError);
  }

Note that, this works fine;

1. If I do not use authorized access to Web API and remove the token from the headers.

2. In Microsoft edge with or without Access Token in headers.

Answer 1

Nothing worked for me except the below; Where I had to import Microsoft.Owin.Cors and add this line of code at the top of ConfigureAuth method in Startup.Auth.cs of Web API.

 app.UseCors(CorsOptions.AllowAll);

Please note:- remove all the settings for enabling CORS from Web.config and WebApiConfig.cs. Otherwise it will complain about duplicate implementation.

Happy Coding :-)