Angular获取API空响应体时的响应头问题求助

我来帮你梳理下这个问题——这不是Bug，是需要调整请求配置才能拿到响应头。当API返回空响应体时，Angular默认配置会因为无法解析空响应体抛出错误，同时默认不会返回包含响应头的完整响应对象，所以我们需要针对性调整请求参数：

1. 修正请求配置项 #

首先，你需要给putheader配置对象补充两个关键属性：

• observe: 'response'：告诉Angular返回完整的HttpResponse对象（而非仅响应体），这样才能获取到响应头
• responseType: 'text'：因为响应体为空，默认的json类型会解析失败，设置为text可以正常接受空响应（也可以用blob，但text更轻量）

修改后的配置示例：

const putheader = {
  headers: new HttpHeaders({
    // 这里保留你原有的头配置，比如Content-Type、Authorization等
  }),
  observe: 'response' as const, // 加as const确保TypeScript类型推断准确
  responseType: 'text' as const
};

2. 调整方法的返回类型与逻辑 #

你原方法声明返回Observable<HttpHeaderResponse>，但配置observe: 'response'后，实际返回的是Observable<HttpResponse<string>>，可以根据需求调整：

方案一：返回完整响应对象（包含头和状态码） #

add(productslist: number[]): Observable<HttpResponse<string>> {
  return this.http.put<string>(this.PutUrl, productslist, putheader).pipe(
    tap(response => {
      console.log("add操作完成");
      // 在这里就能获取响应头，比如取某个自定义头
      console.log("自定义响应头：", response.headers.get('X-Request-ID'));
    }),
    catchError(this.handleError<HttpResponse<string>>('add'))
  );
}

方案二：仅返回响应头 #

如果业务只需要响应头，可以在管道里映射出结果：

add(productslist: number[]): Observable<HttpHeaders> {
  return this.http.put<string>(this.PutUrl, productslist, putheader).pipe(
    tap(_ => console.log("add操作完成")),
    map(response => response.headers), // 只提取响应头返回
    catchError(this.handleError<HttpHeaders>('add'))
  );
}

3. 原代码的问题根源 #

• 你之前未配置observe: 'response'，Angular默认仅返回响应体，空响应体搭配默认的responseType: 'json'会触发解析错误
• HttpHeaderResponse是Angular专门对应无响应体（如204状态码）的响应类型，但需要服务器返回对应状态码+正确的请求配置才能触发，用observe: 'response'的方式更通用稳妥

调整后，你在组件中订阅add方法，就能正常拿到API返回的响应头了。

内容的提问来源于stack exchange，提问作者dori naji