Httpheader i declare not added to httpheader for basic auth api

[Oraicon]

Hi im new to ionic and angular a lot of things i still didnt know, i want to send post request to api with basic auth. heres my code :

import { Component } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http'

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(public http:HttpClient) {
    this.call();
  }

call(){
var data = {username:"someusername",password:"somepassword"}
let body = JSON.stringify(data);

let header= new HttpHeaders({
  'Accept': 'application/json',
  'Method': 'POST',
  'Content-Type': 'application/json',
  'Authorization':'Basic ZHJlYW1fMS4wOmRyZWFtXzEuMA==',
});

let options = {headers: header}

this.http.post("someUrl", body, options).subscribe(data =>{
  console.log(data)
}, error => {
  console.log(error);
});

}
}

im following tutorial from this link : “Ionic 5 HTTP POST with Angular by Example | Techiediaries”, but look like im using the new version ionic, so i change a bit by following this post “angular6 - angular 6 or 7: How to import RequestOptions and ResponseContentType in '@angular/common/http' - Stack Overflow”. but i get error like this:

then i realize, look like my headers not added to the url. here the image from consolelog.(option) header i declare :

and heres image from console.log(error):

so my question is, how to add header i declare to the url ?, is the header added to url will solved this problem ?, or maybe i miss something ?.

thank you in advance, and sorry for bad grammer english.

[rapropos]

I don’t know what is in any of your screenshots, but there are a bunch of red flags in the code:

• All interaction with HttpClient should be done in services, not pages.
• Don’t set any custom headers that aren’t absolutely necessary - in this case, that means only set Authorization.
• Don’t manually stringify request bodies - pass them directly to post.
• Don’t hardcode secrets in your app.

You don’t include the actual URL, but if it doesn’t begin with https, it should. LetsEncrypt provides free SSL certificates if you need one.

[Oraicon]

Hi @rapropos thanks for your attention and answare, i try some of your suggestion, but i still confuse with “All interaction with HttpClient should be done in services, not pages.” can you explain a bit ?

[rapropos]

The more rigidly you can separate parts of your app from one another, ensuring that each piece is only exposed to the absolute minimum it needs, the easier it becomes to change things later, and the easier it is to isolate and test functionality and find bugs.

In practice, pages should not care where their data comes from or goes to. That means they should be operating only on streams of business objects: get an Observable<Foo> or Observable<Foo[]> from a service, present the information to the user, and call methods like add(newFoo: Foo) or update(newFoo: Foo). Maybe that will get something from on-device storage. Maybe there’s a running cache. Maybe it’ll read from the network. The page shouldn’t know or care, and that way it can’t inadvertently depend on things that it shouldn’t.

Look at the way the Tour of Heroes app is structured, specifically chapters 4 and 6 on services and HTTP backends. That design illustrates what I am talking about.

[Oraicon]

Thank you for the explanation, look like it will be more easier to implement it. about the code i solved the problem by using the new library http from ionic documentation (HTTP Server Plugin Documentation: Advantages for iOS and Android). Thank you in advance.