我正在使用Angular 4的HttpClient
来向外部服务发送请求。这是一个非常标准的设置。
this.httpClient.get(url).subscribe(response => {
//do something with response
}, err => {
console.log(err.message);
}, () => {
console.log('completed');
}
问题是,当请求失败时,我看到一个通用的
Http failure response for (unknown url): 0 Unknown Error
消息在控制台。同时,当我在chrome中检查失败的请求时,我可以看到响应状态是422,在"预览"标签中我看到描述失败原因的实际信息。
我怎样才能访问我在chrome开发工具中看到的实际响应信息?
下面是一张演示问题的屏幕截图。 ![在此输入图片描述][1] 。
这个问题与CORS有关。我注意到,在Chrome的控制台中还有一个错误。
请求的资源上没有'Access-Control-Allow-Origin'标头。Origin 'http://localhost:4200' 因此不允许访问。响应的HTTP状态代码为422。
这意味着后端服务器的响应缺少 "Access-Control-Allow-Origin "头,尽管后端nginx被配置为通过add_header
指令在响应中添加这些头信息。
然而,这个指令只在响应代码为20X或30X时添加头信息。在错误的响应中,头文件就会丢失。我需要使用always
参数来确保头信息被添加,而不管响应代码如何。
add_header 'Access-Control-Allow-Origin' 'http://localhost:4200' always;
一旦后端配置正确,我就可以在Angular代码中访问实际的错误信息。
对我来说,这是由服务器端的JsonSerializerException引起的。
在执行请求时发生了一个未处理的异常 Newtonsoft.Json.JsonSerializationException:自我引用的循环 检测到类型为...
客户端说。
POST http://localhost:61495/api/Action net::ERR_INCOMPLETE_CHUNKED_ENCODING
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}
通过消除循环使响应类型更简单,解决了这个问题。