Web Api 2 works with postman but fails with Angular 2

Question

Postman request:

Everything works great with postman. I posted Bearer token on server and got expected result.

Angular 2 request:

    //app component
    test(){
        return this.httpService.get('api/user/get', 'application/json')
          .subscribe(data=>{
              console.log({'loggedIn': true, 'messageText': 'test succeeded'});
            },
            error=>{
              console.log({'loggedIn': false, 'messageText': error});
            }
          );
      }

//http-service
get(url:string, contentType:string):Observable<any> {
    let baseUrl:string = "http://localhost:1382/";

    let headers = new Headers({
      'Accept': 'application/json'
    });

    //append content-type to headers
    headers.append('Content-type', contentType);

    //check if localStorage contains token. If yes, append authorization to headers
    let token = localStorage.getItem('access_token');
    if (token !== '[object Object]' && token !== null) {
      headers.append('Authorization', 'Bearer' + ' ' + token);
    }

    let requestOptions = new RequestOptions({headers: headers});

    //send get request
    return this.http.get(baseUrl + url, requestOptions)
      .map((res:Response)=>res.json())
      .catch(this.handleError);
  }

And it says error:

OPTIONS http://localhost:1382/api/user/get 405 (Method Not Allowed)

XMLHttpRequest cannot load http://localhost:1382/api/user/get. Response for preflight has invalid HTTP status code 405

<Error>
<Message>Authorization has been denied for this request.</Message>
</Error>

I enabled CORS in Web Api 2 web.config like following:

<system.webServer>
<httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization, Accept" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>

Any suggestions?

Answer 1

It works in postman because that is an extension, it just sends the request.
On the other hand when sending from a browser, for security reasons, requests are sent differently.
First the browser sends an OPTIONS request (so called preflight request) to http://foo.com/bar. This is to determine whether it is acceptable to send the request with these parameters.
Your backend should handle the request, respond and set response headers like:

• Access-Control-Allow-Origin
• Access-Control-Allow-Headers
• Access-Control-Allow-Credentials
• Access-Control-Allow-Methods
• etc

After that, based on the headers of the OPTIONS response, the browser will send the GET to http://foo.com/bar IF everything is allowed, like origin, method, etc.

Answer 2

You actually do have a preflight request (failing with 405).

You can see here why, probably due to Content-Type or any other header (X-Requested-With ?).

If you want to keep this preflight you have to handle it in webapi and disable authorization or at least return 200 (you can take a look here)

Answer 3

Thank you everyone for your answers and advices. I summed up all this information and in addition I found this answer: https://stackoverflow.com/a/39397016/4559099 in GrantResourceOwnerCredentials I added context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "http://localhost:4200" });

And in WebApiConfig I added config.EnableCors(new EnableCorsAttribute("http://localhost:4200, ", "*", "*")); and everything works great.

Actually I didn't understand why comment's author wrote config.EnableCors(new EnableCorsAttribute("http://localhost:4200, ", "*", "*")); instead of config.EnableCors(new EnableCorsAttribute("http://localhost:4200", "*", "*")); But it works fine. It will be really helpful if someone explains this.