Obtengo “respuesta de error Http para (URL desconocida): 0 Error desconocido” en lugar de un mensaje de error real en Angular

Estoy usando Angular 4 HttpClient para enviar solicitudes al 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 solicitud falla, veo una Http failure response for (unknown url): 0 Unknown Error genérica de Http failure response for (unknown url): 0 Unknown Error Mensaje de 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 “vista previa” veo el mensaje real que describe la causa de la falla.

¿Cómo accedo al mensaje de respuesta real que puedo ver en las herramientas de desarrollo de Chrome?

Aquí hay una captura de pantalla que demuestra el problema: enter image description here

El problema estaba relacionado con CORS . Noté que había otro error en la consola de Chrome:

Ningún encabezado ‘Access-Control-Allow-Origin’ está presente en el recurso solicitado. El origen ‘ http: // localhost: 4200 ‘ no está, por lo tanto, permitido. La respuesta tenía el código de estado HTTP 422.

Esto significa que a la respuesta del servidor back-end le faltaba el encabezado Access-Control-Allow-Origin aunque back-end nginx se configuró para agregar esos encabezados a las respuestas con la directiva add_header .

Sin embargo, esta directiva solo agrega encabezados cuando el código de respuesta es 20X o 30X. En las respuestas de error faltaban los encabezados. Necesitaba usar el parámetro always para asegurarme de que el encabezado se agregara independientemente del código de respuesta:

add_header 'Access-Control-Allow-Origin' 'http://localhost:4200' always;

Una vez que el back-end fue configurado correctamente pude acceder al mensaje de error real en código angular.

Si está utilizando Laravel como su Backend, edite su archivo .htaccess simplemente pegando 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" 

Para mí fue causado por un lado del servidor JsonSerializerException.

Se ha producido una excepción no controlada durante la ejecución de la solicitud Newtonsoft.Json.JsonSerializationException: bucle de autoreferencia detectado 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, …} 

Hacer que el tipo de respuesta sea más simple eliminando los bucles resolvió el problema.

Este error me estaba ocurriendo en Firefox pero no en Chrome mientras me desarrollaba localmente, y resultó ser que Firefox no confiaba en el certificado ssl de mi API local (que no es válido, pero lo había agregado a mi tienda cert local, que me permitió Chrome confía en él pero no ff). Navegar hacia la API directamente y agregar una excepción en Firefox solucionó el problema.

trabajando para mí después de desactivar la extensión de locking de anuncios en Chrome, este error en algún momento aparece porque algo bloquea http en el navegador

enter image description here

No es tan antiguo como otras preguntas, pero luché con esto en una aplicación Ionic-Laravel, y nada funciona desde aquí (y otras publicaciones), así que instalé el complemento https://github.com/barryvdh/laravel-cors en Laravel y comenzó y funciona bastante bien.

El mío fue causado por una relación inválida en los modelos que estaba tratando de consultar. Encontrado depurando la respuesta que se estrelló en la relación.