在发布请求时设置标头 - 角度

Question

我在我的 angular 服务中发布了方法，像这样说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 请求标头中添加用户名。 因为在 API 中，期望在请求标头中找到用户名。 借助StackOverflow 中的这篇文章，我尝试添加标题（从评论 1 到 4）。 我收到以下错误消息 -

TS2345：'{ headers: Headers; 类型的参数 }' 不能分配给类型为 '{ headers?: HttpHeaders | 的参数 { [标题：字符串]：字符串 | 细绳[]; }; 观察？：“身体”； 参数？：Ht...'。 属性“标题”的类型不兼容。 类型 'Headers' 不能分配给类型 'HttpHeaders | { [标题：字符串]：字符串 | 细绳[]; }'。 类型 'Headers' 不能分配给类型 '{ [header: string]: string | 细绳[]; }'。 “标题”类型中缺少索引签名。

如果我从 post 方法中删除该option ，则一切正常。 谁能帮我这个？

提前致谢

Answer 1

考虑使用HttpHeaders 。

例如：

（我只是将application/json内容类型标头放在示例中）。

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

Answer 2

使用HttpHeaders而不是Headers ，

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

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