Ricevo “Http failure response for (unknown url): 0 Unknown Error” invece del messaggio di errore effettivo in Angular

Sto usando Angular 4 HttpClient per inviare richieste al servizio esterno. È una configurazione molto standard:

 this.httpClient.get(url).subscribe(response => { //do something with response }, err => { console.log(err.message); }, () => { console.log('completed'); } 

Il problema è che quando la richiesta fallisce, vedo una Http failure response for (unknown url): 0 Unknown Error generica Http failure response for (unknown url): 0 Unknown Error message in console. Nel frattempo, quando ispeziono la richiesta fallita in chrome, posso vedere che lo stato della risposta è 422, e nella scheda “preview” vedo il vero messaggio che designa la causa dell’errore.

Come posso accedere al messaggio di risposta reale che posso vedere negli strumenti di chrome dev?

Ecco uno screenshot che illustra il problema: inserisci la descrizione dell'immagine qui

Il problema era correlato a CORS . Ho notato che c’era un altro errore nella console di Chrome:

Nessuna intestazione ‘Access-Control-Allow-Origin’ è presente sulla risorsa richiesta. L’origine ‘ http: // localhost: 4200 ‘ non è quindi consentita l’accesso. La risposta aveva codice di stato HTTP 422

Ciò significa che la risposta dal server di backend mancava di intestazione Access-Control-Allow-Origin anche se backend nginx era configurato per aggiungere tali intestazioni alle risposte con la direttiva add_header .

Tuttavia, questa direttiva aggiunge solo intestazioni quando il codice di risposta è 20X o 30X. Sulle risposte di errore mancavano le intestazioni. Avevo bisogno di usare always parametro per assicurarmi che l’intestazione sia aggiunta indipendentemente dal codice di risposta:

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

Una volta configurato correttamente il backend, è ansible accedere al messaggio di errore effettivo in codice angular.

Se stai usando Laravel come Backend, modifica il tuo file .htaccess semplicemente incollando questo codice, per risolvere il problema CROS nel tuo progetto Angular o IONIC

 Header add Access-Control-Allow-Origin "*" Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT" 

Per me è stato causato da un lato server JsonSerializerException.

Si è verificata un’eccezione non gestita durante l’esecuzione della richiesta Newtonsoft.Json.JsonSerializationException: loop di riferimento automatico rilevato con tipo …

Il cliente ha detto:

 POST http://localhost:61495/api/Action net::ERR_INCOMPLETE_CHUNKED_ENCODING ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …} 

Rendere il tipo di risposta più semplice eliminando i loop ha risolto il problema.

Questo errore si stava verificando per me in Firefox ma non in Chrome mentre si sviluppava localmente, e si è scoperto essere causato da Firefox che non si fidava del certificato SSL della mia API locale (che non è valido, ma l’avevo aggiunto al mio cert store locale, che consentiva cromato fidati ma non ff). Navigare direttamente sull’API e aggiungere un’eccezione in Firefox ha risolto il problema.

lavorando per me dopo aver spento l’estensione del blocco degli annunci in chrome, questo errore a volte appare perché qualcosa che blocca http nel browser

inserisci la descrizione dell'immagine qui

Non è vecchio come le altre domande, ma ho semplicemente faticato con questo in un’app di Ionic-Laravel, e nulla funziona da qui (e da altri post), quindi ho installato https://github.com/barryvdh/laravel-cors come complemento Laravel e ha iniziato e funziona abbastanza bene.

Il mio è stato causato da una relazione non valida nei modelli che stavo cercando di interrogare. Capito dal debug della risposta si è schiantato alla relazione.