我用Angular 4HttpClient向外部服务发送请求.这是一个非常标准的设置:
this.httpClient.get(url).subscribe(response => {
//do something with response
}, err => {
console.log(err.message);
}, () => {
console.log('completed');
}
问题是，当请求失败时，我会看到一个通用的
如何访问在chrome开发工具中看到的实际响应消息？
下面是一个演示问题的屏幕截图:
这个问题与CORS有关.我注意到Chrome控制台中还有一个错误:
请求的资源上不存在"Access Control Allow Origin"标头.因此，不允许访问源"http://localhost:4200".响应的HTTP状态代码为422`
这意味着来自后端服务器的响应缺少Access-Control-Allow-Origin报头，即使后端nginx配置为将这些报头添加到带有add_header directive的响应中.
但是，该指令仅在响应代码为20X或30X时添加标题.在错误响应中，缺少标题.我添加了参数"response of header"以确保使用always:
add_header 'Access-Control-Allow-Origin' 'http://localhost:4200' always;
一旦后端配置正确，我就可以访问Angular 代码中的实际错误消息.