CODEWITHSUNDEEP
angularionic4
baumli
baumli

Reputation: 471

Ionic 4 - Trying to adding headers to post - post call not accepting options

I'm trying to send headers with my post, and I can't seem to get a valid value in for the options.

  sendPostRequest() {
    let token = this.storage.get('ACCESS_TOKEN');
    var headers = new Headers();
    headers.append('Accept', 'application/json');
    headers.append('Content-Type', 'application/json');
    headers.append('Authorization', 'Bearer ' + token);
    headers.append('responseType', 'text');
    let postData = this.signatureForm.value;
    this.httpClient.post("http://localhost:3000/signature", postData, { headers: headers })
      .subscribe(data => {
        this.presentToast();
      }, error => {
    });
  }

I'm getting an error in my editor on ```{ headers: headers }```
Error message is:

No overload matches this call. The last overload gave the following error. Type 'Headers' is not assignable to type 'HttpHeaders | { [header: string]: string | string[]; }'. Type 'Headers' is not assignable to type '{ [header: string]: string | string[]; }'. Index signature is missing in type 'Headers'.ts(2769) http.d.ts(2431, 9): The expected type comes from property 'headers' which is declared here on type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }' http.d.ts(2430, 5): The last overload is declared here.

Upvotes: 1

Views: 3760

Answers (3)

Kevin
Kevin

Reputation: 2414

You are using the interface Headers you need to use HttpHeaders from @angular/common/http'

Example:

import { HttpHeaders } from '@angular/common/http';

var headers = new HttpHeaders();
headers.append('Accept', 'application/json'); 
//append more stuff

Upvotes: 1

Adrita Sharma
Adrita Sharma

Reputation: 22203

Try like this:

const headers = new HttpHeaders().set('Content-Type', 'application/json')
                                 .set('Accept', 'application/json')
                                 .set('responseType', 'text')
                                 .set('Authorization',  'Bearer ' + token);

this.httpClient.post("http://localhost:3000/signature", postData, { headers: headers })
  .subscribe(data => {
    this.presentToast();
  }, error => {
});

Upvotes: 2

Suhas Parameshwara
Suhas Parameshwara

Reputation: 1454

It can be inside the httpOptions. You can modify your headers like,

const httpOptions = {
      headers: new HttpHeaders({
         'Accept': 'application/json '
         'Content-Type': 'application/json',
         'responseType': 'text',
         'Authorization': 'Bearer ' + token  
      });
    }



this.httpClient.post("http://localhost:3000/signature", postData, httpOptions)
      .subscribe(data => {
        this.presentToast();
      }, error => {
    });

Upvotes: 0

Related Questions