Use Headers in http get request

Ionic Framework ionic-v3
1

Hello,

I’m trying to set headers to my api request cause my server is password protected. I’ve ran into a lot of posts but didn’t find out what is going wrong with mine.

Here is my home.ts


  createAuthorizationHeader(headers: Headers) {

    let username = "test";
    let password = "test";
    headers.append('Authorization', 'Basic ' +
      btoa(username + ":" + password));
  }

  get(query: string = '') {
    let headers = new Headers();
    this.createAuthorizationHeader(headers);
    headers.append('Content-Type', 'application/json');
    return this.http.get(this.API_URL + query, {
      headers: headers});
  }

  getCategories() {
    this.http.get('categories').subscribe((data) => {
      this.Categories = data;
    });

I constantly get Argument of type '{ headers: Headers; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'. but when I use “post” instead of get it’s ok.

Am I doing something wrong ?

THank you

2

Ok so I updated my code to this, now I get "cannot read property ‘code’ from undefined

createAuthorizationHeader(headers: Headers) {
    let username = 'test';
    let password = "test";
    headers.append('Authorization', 'Basic ' +
      btoa(username + ':' + password));
  }

  get(query: string = '') {
    let headers = new Headers();
    this.createAuthorizationHeader(headers);
    return this.http.get(this.API_URL + query, { headers: headers });
  }
3

I guarantee that that error is not coming from anything you have posted, because I don’t see the word “code” anywhere.

1 Like
4

Yes you’re right, but there is no “code” in my code at all…


get(query: string = '') {
    let username = "test";
    let password = "test";
    const httpOptions = {
      headers: new HttpHeaders({
        'Authorization': 'Basic ' +
          btoa(username + ':' + password)
      })
    };


  getCategories() {
    this.http.get('categories')
    .subscribe((data) => {
      this.Categories = data;
    });
  }

As I’ve followed Angular official doc on headers, it gives me an other error. I assume it’s a CORS issue but I’m not sure, here is what Chrome outputs in console

27
Capture d’écran 2018-07-09 à 15.14.27.png1186×370 78.1 KB

Any help :frowning: ?

5

I’ve found out why, you have to allow OPTIONS headers in Apache.

6

did you get solution? i also face same

7

HOw to allow OPTIONS headers in Apache ?