Ionic Angular HTTP Header issue

Ionic Framework Ionic Angular
1

Hi there, I have recently started using Ionic and Angular and currently building a login system.
This all went well until I started implementing Authorization tokens in the header. For this, I created a JWT Interceptor that basically does what is needed and successfully adds the token to the header request. however, kept getting an error. Upon investigation, I noticed that the Request Method was removed from the HTTP Call and the server could no longer identify the request method as get, and keep getting an error. If I run the same call in postman and include the header, i get a success.

Upon further investigation, i noticed that even if i disable the JWT Interceptor and add the header to the HTTP call directly, it still removes the request method from the call.

No matter how I try and skin the cat, as soon as new headers are added, the call breaks.

Please note that I am running ionic 6.20.3 (the latest).
I then wanted to make sure that Its not my code, so I created a new application from scratch, redid the calls on a black framework and still get the same issues.

image
image1920×1020 98.5 KB

The call is made like this
without headers, the call works and the server responds with auth error.
// Get our secret protected data
getSecretData() {
return this.http.get(${this.url}/secret);
}

// Get our secret protected data
getSecretData() {
return this.http.get(${this.url}/secret, {headers: headers} );
}

Any ideas why headers are being removed?

2

It depends on your HTTP library.

If you are using HttpClient provide by Angular you must follow the angular documentation and try post your issue on stackoverflow too.

Notice: Take care about reassign headers variable with new result after each new header setted.

If you are using the cordova plugin (@awesome-cordova-plugins/http) you must follow the official github readme section about set headers for future requests.

Or use the simplest way:

this.http.get('http://ionic.io', {}, {})

/* It is not specified in documentation bellow but I guess that same parameters as Angular with anonymous Object */
/* First parameter should be your url */
/*.Second parameter should be your data */
/*.Third parameter should be your options (and so headers)*/

Other source: