Angular 5 HttpClient如何同时设置HttpHeaders并获取Response对象？

算力阿峰

2026-5-27

解决方案：同时携带请求头并获取完整Response对象

嘿，这事儿其实超简单！你只需要把请求头配置和**observe: 'response'**这两个设置合并到同一个请求选项对象里就行啦，Angular的HttpClient完全支持同时配置这两个参数。

核心思路

你之前的两段代码分别实现了「带请求头发POST」和「获取完整Response」，现在只要把这两个配置项放在同一个httpOptions对象中，HttpClient就会同时应用它们——既携带你指定的请求头，又返回包含状态码、响应头、响应体等完整信息的HttpResponse对象。

代码示例（JSON请求场景）

// 合并headers和observe配置到同一个httpOptions
const httpOptions = {
  headers: new HttpHeaders({ 
    'Content-Type': 'application/json', 
    'Authorization': 'my-auth-token' 
  }),
  observe: 'response' as 'response' // 类型断言确保TypeScript正确识别类型
};

// 发送请求，返回完整的HttpResponse对象
return this.http.post<HttpResponse<any>>(serviceUrl + url, dto, httpOptions)
  .pipe(
    catchError(this.handleError)
  );

代码示例（文件上传场景）

如果是上传文件，通常不需要手动设置Content-Type（Angular会自动处理multipart/form-data类型），只需要保留认证头即可：

const httpOptions = {
  headers: new HttpHeaders({ 
    'Authorization': 'my-auth-token' 
  }),
  observe: 'response' as 'response'
};

return this.http.post<HttpResponse<any>>(serviceUrl + url, fileForUpload, httpOptions)
  .pipe(
    catchError(this.handleError)
  );