ionic 3 header not sending Authorizaqtion 'bearer "token"' to server

Question

Im doing a login screen that takes a username and password. if the login was successful the server will return a token. then im trying to call another function to get user info but the authorization header is not being passed. im trying my server method on postman and its working fine so i believe the problem is in the headers. May someone please advise me on what should be done?

let url = urlConst.Login;
let params1 = new HttpParams();

let loader = this.loadingcontroller.create({
  content: stringEngConst.signinngin
});

let attributes = {
  username: this.uname.value.toLowerCase(),
  password: this.password.value,
  grant_type: "password"
};

var headers = new HttpHeaders();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
let body = 'username=' + this.uname.value.toLowerCase() + '&password=' + this.password.value + '&grant_type=password';
let data: Observable < any > = this.http.post(url, body, {
  headers: headers
});

loader.present().then(() => {

      data.subscribe(result => {
            if (result.access_token != null) {

              this.signintoken = result.access_token;
              this.storage.set(storageConst.SIGN_IN_TOKEN, result.token_type + " " + result.access_token);
              headers.append('Authorization', 'Bearer ' + this.signintoken);
              let url1 = 'http://localhost:57940/API/Account/GetUserInfo/';
              let info: Observable < any > = this.http.get(url1, {
                headers: headers
              });

              info.subscribe(result => {
                /*Do Something*/
              });
            }

Please Note that result.access_token != null is true. and i am successfully getting the token back. But it is not being passed again to the second url (info)

score 0 · Answer 1 · answered Jun 26 '18 at 13:42

0

Looks like this SO post may solve things for you: https://stackoverflow.com/a/47805759/6599076

You may want to use:

headers = headers.append('Authorization', 'Bearer ' + this.signintoken);

answered Jun 26 '18 at 13:42

BRass

3,698
2
28
46

this doesn't work for me. i tried it but now it not passing the header anymore. it is giving me an CORS problem which did not occur before. it says: "Failed to load http://localhost:57940/API/Account/GetUserInfo/: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:8100, *', but only one is allowed. Origin 'http://localhost:8100' is therefore not allowed access." – Ali Ysf Jun 27 '18 at 06:52
Sounds like you have a different problem now. The CORS problem is likely not related to the token header problem. Sounds like your API is not handling CORS correctly and is sending multiple items in the CORS response header. You likely need to fix that first since the OPTIONS HTTP request (for CORS) happens before any other GET/POST. – BRass Jun 27 '18 at 12:21
May you please advise on how may i test that ? – Ali Ysf Jun 27 '18 at 12:54
In Chrome Dev tools, watch the network tab. My guess is you'll see an OPTIONS request to your API but not a GET or POST. If true, you can then look at the response headers. Sounds like your `Access-Control-Allow-Origin` header will have 2 items in it (localhost:8100, *). It should only have 1. Again, this is completely different from your original request header problem. – BRass Jun 27 '18 at 12:57
I believe this is an Options problem. Ill work that angel and let you know the outcome. Thanks mate – Ali Ysf Jun 27 '18 at 13:26

Sergey Rudenko · Answer 2 · 2018-06-26T15:23:57.670

You are using the same headers as for the first http request:

var headers = new HttpHeaders();
headers.append('Content-Type', 'application/x-www-form-urlencoded');

Depending on your end point for the subsequent call it might be that you need to set headers differently:

Try creating new headers with

var headers2 = new HttpHeaders();
headers.append('Content-Type', 'application/json');

Or get rid of Content-Type completely depending on what your end point expects.

Also if you are using Ionic 3 its worth to check which Http module you are using (HttpClient or the older one) as there are some differences in how these tend to handle request options.

i tried it in all possible ways. nothing worked yet :/ it is throwing a CORS problem though im not facing it in getting the token. — Ali Ysf, Jun 27 '18 at 07:00

ionic 3 header not sending Authorizaqtion 'bearer "token"' to server

2 Answers2