未捕获的类型错误：无法读取 getOriginalError 处未定义的属性“ngOriginalError”-当 httpClient 返回字符串时

Posted 2023-03-04

【中文标题】未捕获的类型错误：无法读取 getOriginalError 处未定义的属性“ngOriginalError”-当 httpClient 返回字符串时

【英文标题】：Uncaught TypeError: Cannot read property 'ngOriginalError' of undefined at getOriginalError - when httpClient returned string

【发布时间】：2019-07-27 21:45:19

【问题描述】：

当我尝试使用返回字符串的HttpClient 调用 API 时，调用了 subscribe 方法的错误处理程序。

前端代码：

this.httpClient.get<string>(`$this.baseUrl/account/getname`).subscribe(
      (accountName)=> console.log(accountName),
      () => console.log("Failure")
    ); 

控制器中的后端代码：

[HttpGet]
public string GetName()
               
   return "Sample Account Name";
 

前端代码会将“Failure”记录到控制台。

如果从subscribe()中删除错误通知方法，则会出现以下错误

未捕获的类型错误：无法读取属性“ngOriginalError” 在 getOriginalError 处未定义

【问题讨论】：

我认为在联系asp.net mvc应用程序时出现了cors错误。请参考此链接。 ***.com/questions/40079214/…

【参考方案1】：

未捕获的类型错误：无法在 getOriginalError 处读取未定义的属性“ngOriginalError”

发生这种情况是因为来自服务器端的响应是错误的，并且没有处理错误的处理程序。我想，解决办法是HttpClient发出http请求时总是处理错误：

import  catchError  from 'rxjs/operators';

makeHttpRequest(url): Observable<any> 
  return this.httpClient.get(url)
   .pipe(
     catchError(err => console.log(err))
   );


makeHttpRequest(`$this.baseUrl/account/getname`).subscribe(
  (accountName) => console.log(accountName);
); 

【讨论】：

是的，没错。但是错误的原因是没有指定 httpclient 的响应类型

【参考方案2】：

由于 HttpClient 的默认响应类型是 JSON，它期望响应对象是一个 json 值。

但我们的响应是字符串。 这就是错误背后的原因。

当 API 返回非 JSON 数据时，我们需要在 get 请求中使用 responseType 选项指定它。

有不同的选项，例如'blob'、'text'、'arraybuffer'、'json'

对于上述情况，如果我们不将get调用的类型参数指定为字符串（get<string>），我们只需将responseType设置为responseType : 'text'

return this.httpClient.get(`$this.baseUrl/account/getname`, 
       responseType : 'text' ).subscribe(
             (data)=> console.log(data),
             () => console.log("Failure")
       ); 

但是如果我们将get调用的类型参数指定为字符串，就会报错

类型 '"text"' 不能分配给类型 '"json"'

为避免我们需要将requestType选项修改为responseType : 'text' as 'json'

 return this.httpClient.get<string>(`$this.baseUrl/account/getname`, 
        responseType : 'text' as 'json').subscribe(
             (data)=> console.log(data),
             () => console.log("Failure")
        ); 

【参考方案3】：

请在您的 http 方法（post/get/put）中检查您的响应类型，因为它默认为 json 类型，但有时您的响应有 blob 或文本，然后会发生这种类型的错误。

responseType?: 'arraybuffer'|'blob'|'json'|'text' 在角度库中