Estoy usando Angular 4 HttpClient
para enviar peticiones a un servicio externo. Es una configuración muy estándar:
this.httpClient.get(url).subscribe(response => {
//do something with response
}, err => {
console.log(err.message);
}, () => {
console.log('completed');
}
El problema es que cuando la petición falla veo una respuesta genérica
Http failure response for (unknown url): 0 Unknown Error
en la consola. Mientras tanto, cuando inspecciono la solicitud fallida en chrome puedo ver que el estado de la respuesta es 422, y en la pestaña "preview" veo el mensaje real que describe la causa del fallo.
¿Cómo puedo acceder al mensaje de respuesta real que puedo ver en chrome dev tools?
Aquí's una captura de pantalla que demuestra el problema: []
El problema estaba relacionado con CORS. Me di cuenta de que había otro error en la consola de Chrome
No 'Access-Control-Allow-Origin' cabecera está presente en el recurso solicitado. Por lo tanto, no se permite el acceso al origen 'http://localhost:4200'. La respuesta tenía el código de estado HTTP 422.`
Esto significa que en la respuesta del servidor backend faltaba la cabecera Access-Control-Allow-Origin
aunque el backend nginx estaba configurado para añadir esas cabeceras a las respuestas con la directiva add_header
.
Sin embargo, esta directiva sólo añade cabeceras cuando el código de respuesta es 20X o 30X. En las respuestas de error, las cabeceras no aparecían. Necesitaba utilizar el parámetro always
para asegurarme de que la cabecera se añadía independientemente del código de respuesta:
add_header 'Access-Control-Allow-Origin' 'http://localhost:4200' always;
Una vez que el backend estaba correctamente configurado pude acceder al mensaje de error real en el código de Angular.
En mi caso fue causado por una JsonSerializerException del lado del servidor.
Se ha producido una excepción no manejada mientras se ejecutaba la petición Newtonsoft.Json.JsonSerializationException: Bucle de auto-referencia detectada con el tipo ...
El cliente dijo:
POST http://localhost:61495/api/Action net::ERR_INCOMPLETE_CHUNKED_ENCODING
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}
Haciendo el tipo de respuesta más simple eliminando los bucles se solucionó el problema.
Si usted está usando Laravel como su Backend, entonces edite su archivo .htaccess con sólo pegar este código, para resolver el problema CROS en su proyecto Angular o IONIC
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"