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?

Seems a bit obvious, but have you debugged/checked it's actually hitting that code (i.e the token is being appended) and the token is actually valid? the `if (token !== '[object O...` statement looks a bit suspect to me. You could also check the traffic in fiddler. Sometimes you're not sending what you think you're sending! :)... Sometimes a malformed request can give the sort of error you're seeing. — JsAndDotNet, Feb 27 '17 at 10:05
What if you try to *hard-code* all request info (URL, headers, etc.) temporarily, just to make sure it's not the logic inside your `get()` method that's faulty? In other words, enter all data as strings just like you did in Postman. — AngularChef, Feb 27 '17 at 10:06
could you look at the actual network request and verify that you have all headers added like with postman? — Emin Laletovic, Feb 27 '17 at 10:06
In the `WebApiConfig.cs` or `Global.asax` add `app.UseCors()`. Might need the nuget `Microsoft.AspNet.WebApi.Cors` — zaitsman, Feb 27 '17 at 10:58

Norbert Bicsi · Answer 1 · 2017-11-14T08:14:47.820

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.

score 2 · Answer 2 · edited May 23 '17 at 12:17

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)

edited May 23 '17 at 12:17

Community

1
1

answered Feb 27 '17 at 10:33

Pierre-Marie Le Brun

143
7

score 1 · Answer 3 · edited May 23 '17 at 12:32

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.

Web Api 2 works with postman but fails with Angular 2

3 Answers3