如何在 Angular 5 中使用 HttpClient 访问响应标头？答案

【问题标题】：How do I access response headers using HttpClient in Angular 5?如何在 Angular 5 中使用 HttpClient 访问响应标头？
【发布时间】：2018-05-25 00:47:01
【问题描述】：

我在 Angular 5 中编写了一个身份验证服务，它使用 HttpClient 类向我的后端发出 POST 请求。后端通过发送 JWT 不记名令牌进行响应。

我的请求如下所示：

return this.http.post('http://127.0.0.1:8080/api/v1/login', {
  'username': username,
  'password': password
}, {
  headers: new HttpHeaders()
    .set('Content-Type', 'application/json')
})
  .toPromise()
  .then(response => {
    console.log(response);
    return response;
  });

}

如何访问响应的授权标头？

当我将响应写入控制台时，如上所示，它显示“null”。我知道错误不在后端，因为我捕获了流量并且后端确实在发送不记名令牌。

非常感谢任何帮助。

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

要访问完整的响应（不仅仅是响应的正文），您必须在 http 请求中传递 observe: 'response' 参数选项。现在您可以使用res.headers访问标题

return this.http.post('http://127.0.0.1:8080/api/v1/login', {
        'username': username,
        'password': password
    }, {
        headers: new HttpHeaders()
            .set('Content-Type', 'application/json'),
        observe: 'response'
    })
    .map(res => {
        let myHeader = res.headers.get('my-header');
    });

Docs

【讨论】：

如何在获取请求中进行操作？