Angular HttpHeaders 未设置值答案

【问题标题】：Angular HttpHeaders is not setting valueAngular HttpHeaders 未设置值
【发布时间】：2019-11-15 06:36:50
【问题描述】：

我正在尝试为其中一个获取请求设置标头。以下是函数：

 getLeads(jwtToken: string): Observable<any>{
    const headers = new HttpHeaders();
    const authroizationToken = 'bearer '.concat(jwtToken);
    console.log(authroizationToken);          ------------------>  prints the token
    headers.append('Authorization', authroizationToken);
    console.log(headers.get('Authorization'));  ---------------------> this prints null
    var result = this.http.get<Leads>(this.getLeadsUrl, {headers});
    return result;
  }

但由于某种原因，heades.get('Authorization') 为空，我无法弄清楚原因。任何帮助将不胜感激。

【问题讨论】：

这个问题已经在stackoverflow.com/a/47805759/2358409得到解答

标签： angular angular-httpclient

【解决方案1】：

其实.append 返回的是新的 headers 对象。试试这个它按预期工作。只需确保每次附加新标头时将标头分配回变量即可。

   getLeads(jwtToken: string) {
    let headers = new HttpHeaders();
    const authroizationToken = 'bearer '.concat(jwtToken);
    console.log(authroizationToken);
    headers = headers.append('Authorization', authroizationToken);
    console.log(headers.get('Authorization'));
  }

这是一个有效的Stackblitz

希望这会有所帮助:)

【讨论】：

【解决方案2】：

对您的代码进行以下更改：

getLeads(jwtToken: string): Observable<any>{
    let httpOptions = {
      headers: new HttpHeaders({ 'Authorization': `bearer ${jwtToken}` })
    };
    return  this.http.get<Leads>(this.getLeadsUrl, httpOptions);
}

【讨论】：

【解决方案3】：

该问题在以下主题中有答案。

https://stackoverflow.com/a/45286959/12376898

https://stackoverflow.com/a/47805759/12376898

总而言之，标题是不可变的，因此进行任何更改都会创建一个新对象。除非您将新创建的对象引用到旧的引用，否则只有旧的对象会持续存在。

getLeads(jwtToken: string) {
let headers = new HttpHeaders();
headers.append('ANYHEADER','SOMESTRING') // will be lost
headers = headers.append('ANYHEADER','SOMESTRING') //unless you reference it again to the old reference
}

【讨论】：

【解决方案4】：

可以使用HttpHeaders的set()方法：

在原始实例的克隆中设置或修改给定标头的值。如果标头已经存在，则将其值替换为返回对象中的给定值。

一个例子：

let header = new HttpHeaders().set(
  "Authorization",`bearer ${jwtToken}`
);

return this.http.get<Leads>(this.getLeadsUrl,  {headers:header});

【讨论】：