Setting header at post request - angular

Question

I've post method at my angular service say AuthService.ts like this

@Injectable({
    providedIn: 'root'
})
export class AuthService {
    ...
    ...
    login(username: string, password: string) {
        let headers = new Headers(); //1 
        headers.append('username', username); //2
        let options = {
            headers: headers
        }; //3

        return this.http.post < any > (`${environment.authBaseUrl}`, {
                username,
                password
            }, options) //4
            .pipe(map(user => {
                if (user && user.token) {
                    localStorage.setItem('currentUser', JSON.stringify(user));
                    this.currentUserSubject.next(user);
                }

                return user;
            }));
    }
}

My purpose is to add the username at the POST request header. Cause there in the API it is expecting that a username will be found at the request header. With the help of this post in StackOverflow, I'm trying to add the header (from comment 1 to 4). I'm getting the below error message -

TS2345: Argument of type '{ headers: Headers; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'. Types of property 'headers' are incompatible. 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'.

If I remove the option from the post method then everything works fine. Can anyone help me with this?

Thanks in advance

score 2 · Answer 1 · answered Dec 18 '19 at 14:02

2

Consider using HttpHeaders.

For example:

(I just put application/json content-type header for example purpose).


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

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json', 'username': username)
};
[...]

return this.http.post<any>(`${environment.authBaseUrl}`, { username, password }, httpOptions) //4
  .pipe(map(user => {
    if (user && user.token) {
      localStorage.setItem('currentUser', JSON.stringify(user));
      this.currentUserSubject.next(user);
    }

    return user;
  }));

answered Dec 18 '19 at 14:02

Flo

936
1
8
19

Thanks, it does remove the problem but the header doesn't contain any value yet. Am I doing anything wrong? – Razib Dec 18 '19 at 14:18
What is your API ? Is it a NodeJS API ? Show us how you're reading the headers on server side – Flo Dec 18 '19 at 15:26
1

By the way, if you want to check if the headers are correctly sent, you can use dev tools. Before sending the request open Dev tools (f12) and go to Network tab. Send the request. Then you'll see the request in the list when it's launched. You then are able to inspect the headers that are sent in the request. – Flo Dec 18 '19 at 15:27

score 2 · Accepted Answer · answered Dec 18 '19 at 14:04

2

Use HttpHeaders instead of Headers,

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

let options = {
  headers: new HttpHeaders({ 'username': username })
}

answered Dec 18 '19 at 14:04

MonkeyScript

4,776
1
11
28

Setting header at post request - angular

2 Answers2