Angular - Bearer token

Question

I have an issue with authentication. When I use POSTMAN and add authorization header with a Bearer token, then everything is fine. But when I try a request by Angular, then I get response 405 Method Not Allowed. I am using Angular 5 and my code is very simple:

    import { HttpHeaders, HttpClient } from '@angular/common/http';
    const my_token = 'xxx'
    @Injectable()
    export class RequestService {
      makeRequest() {
        return this.http.get(api.get, {headers: new HttpHeaders(
          {
            'Authorization': `Bearer ${my_token}`,
            'Content-Type': 'application/json'
          })});
        }
     }

What am I doing wrong?

`'Bearer my_token'` literally ? Please post your real code so that we see the issue — , Sep 07 '18 at 08:49
I have edited my example. Value of "Authorization" is "Bearer" followed by my token. But it doesn't work. — krzyhub, Sep 07 '18 at 08:54
not sure about POSTMAN but for sure you have to write **'Autorization': \`Bearer ${my_token}\`** use the backquote — Massimo Costa, Sep 07 '18 at 08:54
Event if I have value of "Authorization" as a straight string it still doesn't work. — krzyhub, Sep 07 '18 at 08:57
What is the content of "api.get" ?? is it pointing to a URL valid for a GET request ?? HTTP_405 means the url you contacted exists but it does not accept GET requests — Massimo Costa, Sep 07 '18 at 08:59
Do you know about CORS? Web browser prevents Javascript code from making a request from the different origin. You should enable CORS in backend code to allow the requested origin. An example Backend code in Java https://stackoverflow.com/questions/44905898/how-to-enable-cors-on-server-side-code-in-java — Khaled, Sep 07 '18 at 09:03
@Khaled I see in Dev Tools console that `Cross-Origin Read Blocking (CORB) blocked cross-origin response` so this could be it. But if I can get proper response doing request by POSTMAN - could it still be the issue with a server CORS? — krzyhub, Sep 07 '18 at 09:09
Postman does not implement CORS, just browsers. You could have started by telling us about the warning.... https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS — David, Sep 07 '18 at 09:25
@David `Cross-Origin Read Blocking (CORB) blocked cross-origin response http://my_endpoint.dev/ with MIME type application/json` - so this would be a server issue? — krzyhub, Sep 07 '18 at 09:29

Sandy · Accepted Answer · 2019-02-12T01:09:42.403

Its an old issue but posting my thought for future readers. Will try to keep it short.

THEORY

To me the issue looks to be related to CORS (Cross Origin Resource Sharing). When www.domain1.com makes a call to www.domain2.com, it is considered unsafe and browser needs some special headers to process your request (read Access-Control-Allow-Origin, Access-Control-Allow-Methods). Even www.domain:1000.com and www.domain:2000.com are considered separate domains.

Why POSTMAN works?

POSTMAN (even Telerik Fiddler) is a tool and not browser. Hence they does not care about any headers in response and renders the response. That's why they works. But when you run it via Angular, the app opens in browser and hence you see the issue of CORS playing the spoilsport.

SOLUTION

In the end, its an issue from server side code and not client side. Your Angular code is fine, you need to do either of the following to fix it.

Permanent: Enable CORS in server side code. Read about it on internet more.
Temporary: Install Chrome Extension for CORS (many free available) and enable the status of the plugin. Your Angular app should start working just fine.

Side Note

Regarding your code to add new request headers, should not it be part of some HTTP Interceptor?

I understand that you just wanted to present the issue and it may not be your original code. But still wanted to point this out.

Hope it helps.

score 1 · Answer 2 · answered Sep 07 '18 at 08:51

1

You have to concat my_token with Bearer

Here's an example

import { HttpHeaders, HttpClient } from '@angular/common/http';
@Injectable()
export class RequestService {
     makeRequest() {
        return this.http.get(api.get, {headers: new HttpHeaders(
        {
          'Authorization': 'Bearer' + my_token,
           'Content-Type': 'application/json'
              })});
        }
      }

answered Sep 07 '18 at 08:51

Aniket Avhad

4,025
2
23
29

Thank you for your answer. I should have been more precise in my example. My value of "Authorization is a straight string. – krzyhub Sep 07 '18 at 08:55

score -1 · Answer 3 · answered Feb 05 '19 at 18:16

-1

First concat my_token with Bearer like follows:
my_token1 = `Bearer ${my_token}`
(use backticks)

then use it like
'Authorization': ${my_token1},

answered Feb 05 '19 at 18:16

Pravin Pokharkar

102
9

Angular - Bearer token

3 Answers3