Angular HttpClient infinite loading by set header bearer

Question

I have this code to get data from API

return this.httpClient.get<any>(requestUrl, {
      headers: new HttpHeaders({
        "Content-Type": "application/json",
        "Authorization": "Bearer " + this.cookieService.get('auth-token'),
      }),
    });

when I subscribe to this like this

return this.api.loadAll('cuser').subscribe(
  result => {
    console.log(result);

  },
);

It doesn't return any data to me and just loading

but when I remove the headers and call it again it shows me the data.

return this.httpClient.get<any>(requestUrl, {
  // headers: new HttpHeaders({
  //   "Content-Type": "application/json",
  //   "Authorization": "Bearer " + this.cookieService.get('auth-token'),
  // }),
});

But I need the Authorization and the token to get current user data from Django back-end.

So what make my code wrong?

Following is the Post man sample that return correct data without issue

var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNTkyNTUxMTE3LCJqdGkiOiIxMGJlZWExMDQ0MmE0NmUyOGVmM2E5NTBjY2NiNTRmOSIsInVzZXJfaWQiOjF9.5XOhaXANSk4CGbh7pHqE99Qh_yxj6YuewZHFC1UScIs");

var requestOptions = {
  method: 'GET',
  headers: myHeaders,
  redirect: 'follow'
};

fetch("http://localhost:8000/api/cuser", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

No any error just in the network it shows the pending status The back-end log during the request

Any errors? Your angular code is alright, but your backend seems to not return anything. — , Jun 19 '20 at 07:12
Looks from the screenshot the token is empty in the `Authorization` header. Check if `this.cookieService.get('auth-token')` actually returns a valid token. — ruth, Jun 19 '20 at 07:13
@MichaelD auth-token set up correctly as I use it for the post request the same. — Nasser Ali Karimi, Jun 19 '20 at 07:18
@NasserAliKarimi: Then please elaborate why it looks empty in the `Request Headers` section of the screenshot. — ruth, Jun 19 '20 at 07:19
@MichaelD I just add a log on the function that call the api, and it return the token successfully. I add this `console.log('Token is :' + this.cookieService.get('auth-token'));` just before the http request. — Nasser Ali Karimi, Jun 19 '20 at 07:23
Your token is not included in the request, configure your backend to return `401` when the token is missing. As for why it's not included, try to get the token prior to your call and append it to the headers using `append` or `set` (Basically what you did in the last code sample) — , Jun 19 '20 at 07:36

score 0 · Answer 1 · answered Jun 19 '20 at 07:37

I figure out it, actually the issue with back-end and HTTP 301 response. The requested API should be ended with slash. So I added a slash at the end of the requested URL and the issue fixed.

REF https://stackoverflow.com/a/1579859/9246297

The successful request after adding slash

The failed request without slash at the end of the request

Angular HttpClient infinite loading by set header bearer

1 Answers1