How I add Headers to http get or http post in Typescript and angular 2

Question

getHeroes     Observable lt Heros   gt        return this http get this heroesUrl         map this extractData         catch this handleError         Where I add the headers and how  looking for a simple example

User · Answer

Be sure to declare HttpHeaders without null values.

    this.http.get('url', {headers: new HttpHeaders({'a': a || '', 'b': b || ''}))

Otherwise, if you try to add a null value to HttpHeaders it will give you an error.

User · Answer

I have used below code in Angular 9  note that it is using http class instead of normal httpClient    so import Headers from the module  otherwise Headers will be mistaken by typescript headers interface and gives error  import  Http  Headers  RequestOptionsArgs   from   angular http   and in your method use following sample code and it is breaked down for easier understanding   let customHeaders   new Headers   Authorization   Bearer     localStorage getItem  token      const requestOptions  RequestOptionsArgs     headers  customHeaders    return this http get   api orders   requestOptions

User · Answer

You can define a Headers object with a dictionary of HTTP key value pairs  and then pass it in as an argument to http get   and http post   like this  const headerDict        Content-Type    application json      Accept    application json      Access-Control-Allow-Headers    Content-Type      const requestOptions                                                                                                                                                                                        headers  new Headers headerDict        return this http get this heroesUrl  requestOptions   Or  if it s a POST request  const data   JSON stringify heroData   return this http post this heroesUrl  data  requestOptions    Since Angular 7 and up you have to use HttpHeaders class instead of Headers  const requestOptions                                                                                                                                                                                        headers  new HttpHeaders headerDict

User · Answer

This way I was able to call MyService private REST API SERVER    http   localhost 4040 abc   public sendGetRequest        var myFormData     email   abc abc com   password   123        const headers   new HttpHeaders       headers append  Content-Type    application json         HTTP POST REQUEST    this httpClient    post this REST API SERVER  myFormData        headers  headers           subscribe  data    gt        console log  quot i m from service             quot   data  myFormData  headers       return data

User · Answer

if someone facing issue of CORS not working in mobile browser or mobile applications  you can set ALLOWED HOSTS     your host ip    in backend servers where your rest api exists      here your host ip  is external ip to access ionic   like External  http   192 168 1 120 8100  After that in ionic type script make post or get using IP of  backened server  in my case i used django rest framwork and i started server as -  python manage py runserver 192 168 1 120 8000  and used this ip in ionic get and post calls of rest api

[angular2-services] How I add Headers to http.get or http.post in Typescript and angular 2?

Examples related to angular2-services