Angular 12：如何用HttpClient处理API的多种响应类型？

原有实现（Fetch API） #

原本使用Fetch API发送请求，逻辑为：响应正常则返回JSON，否则抛出响应对象以便捕获处理：

fetch(`http://localhost:9000/api/test`, {
   method: "post",
   body: JSON.stringify({ "data": my_payload })
})
.then(response => {
  if (response.ok) {
    return response.json();
  }

  throw response;
})
.then(data => data)
.catch(err => err);

改用Angular HttpClient后的问题 #

改用Angular的HttpClient实现相同请求，初始代码如下：

this.http.post('http://localhost:9000/api/test',
{ "data": my_payload })
.pipe(
  catchError(err => throwError(() => err))
);

核心问题：API正常处理时返回JSON格式响应，但发生错误时会返回纯文本格式的错误描述。此时控制台抛出如下错误：

TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, ReadableStream, Array, AsyncIterable, or Iterable.

即使添加responseType: "text"配置，错误仍然存在：

this.http.post('http://localhost:9000/api/test',
{ "data": my_payload }, { responseType: "text" })
.pipe(
  catchError(err => throwError(() => err))
);

已尝试的排查方向：搜索后怀疑问题与responseType配置、RXJS版本（当前为7.5.0）有关；也曾尝试使用拦截器类，但仅改变了错误发生的位置，未解决根本问题。

请问该错误的原因是什么？

内容的提问来源于stack exchange，提问作者Rafael Fronteira