在 post 请求中设置 header - angular

Setting header at post request - angular

我在 angular 服务中使用了 post 方法 AuthService.ts 像这样

@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;
            }));
    }
}

我的目的是在 POST 请求 header 中添加用户名。因为在 API 中,期望在请求 header 中找到用户名。在 的帮助下,我尝试添加 header(从评论 1 到 4)。我收到以下错误消息 -

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'.

如果我从 post 方法中删除 option,那么一切正常。 谁能帮我解决这个问题?

提前致谢

考虑使用 HttpHeaders

例如:

(为了举例,我只是放了 application/json content-type header)。


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;
  }));

使用HttpHeaders代替Headers,

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

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