Angular中使用HttpClient：如何确认响应体并获取HTTP响应头？

第一个问题：默认返回的res是不是只有响应体？ #

没错！默认情况下，HttpClient的get、post等方法返回的Observable只包含HTTP响应的消息体，响应头、状态码这些元数据是不会包含在这个返回值里的。

另外补充个小细节：你代码里的res.json()其实是多余的——Angular 4.3及以后的HttpClient已经自动帮你把JSON格式的响应体解析成JavaScript对象了，直接用res就是解析后的结果啦。

第二个问题：如何获取HTTP响应头？ #

要获取响应头（以及状态码、响应状态文本等完整响应信息），你需要在请求的配置选项里设置observe: 'response'，这样HttpClient会返回一个HttpResponse<T>类型的对象，它包含了所有响应相关的信息。

举个实际的代码例子：

this.http.post('http://localhost:8083', body, { observe: 'response' })
  .subscribe((response: HttpResponse<any>) => {
    // 检查某个响应头是否存在并获取它的值
    const targetHeader = response.headers.get('你的目标头名称');
    if (targetHeader) {
      console.log(`找到目标响应头：${targetHeader}`);
    } else {
      console.log('目标响应头不存在');
    }

    // 同时你依然可以获取响应体
    const responseBody = response.body;
    console.log('响应体内容：', responseBody);
  });

注意跨域场景的限制 #

如果是跨域请求，浏览器默认只允许前端获取几个标准响应头（比如Content-Type、Cache-Control等）。如果要获取自定义响应头，需要后端在响应中设置Access-Control-Expose-Headers头，把允许前端访问的自定义头列出来，比如：

Access-Control-Expose-Headers: X-Custom-Header, X-Another-Header

这样前端才能正常拿到这些自定义头的值。

内容的提问来源于stack exchange，提问作者Manu Chadha