Ich bekomme "Http-Fehler-Antwort für (unbekannte url): 0 Unknown Error" anstelle der tatsächlichen Fehlermeldung in Angular

Ich bin mit Angular 4 HttpClient, um Anfragen an externen Dienst zu senden. Es ist ein sehr Standard-Setup:

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

Das Problem ist, wenn die Anfrage fehlschlägt, sehe ich eine generische Http failure response for (unknown url): 0 Unknown Error" in der Konsole. Wenn ich jedoch die fehlgeschlagene Anfrage in Chrome untersuche, sehe ich, dass der Antwortstatus 422 ist, und in der Registerkarte "Vorschau" sehe ich die eigentliche Nachricht, die die Fehlerursache beschreibt.

Wie kann ich auf die tatsächliche Antwortmeldung zugreifen, die ich in den Entwicklungswerkzeugen von Chrome sehen kann?

Hier ist ein Screenshot, der das Problem veranschaulicht:

Patrick
Bearbeitete Frage 12. März 2018 в 9:08
Programmierung
angular typescript
8. November 2017 в 1:10
6 Aufrufe
Lösung

Das Problem stand im Zusammenhang mit CORS. Ich bemerkte, dass es einen weiteren Fehler in der Chrome-Konsole gab:

Kein 'Access-Control-Allow-Origin' Header ist auf der angeforderten Ressource vorhanden. Der Herkunft 'http://localhost:4200' ist daher der Zugriff nicht gestattet. Die Antwort hatte den HTTP-Statuscode 422.

Das bedeutet, dass in der Antwort des Backend-Servers der Access-Control-Allow-Origin-Header fehlte, obwohl der Backend-Server nginx so konfiguriert war, dass er diese Header mit der add_header-Direktive zu den Antworten hinzufügt.

Diese Anweisung fügt jedoch nur Header hinzu, wenn der Antwortcode 20X oder 30X ist. Bei Fehlerantworten fehlten die Kopfzeilen. Ich musste den Parameter always verwenden, um sicherzustellen, dass die Header unabhängig vom Antwortcode hinzugefügt werden:

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

Sobald das Backend korrekt konfiguriert war, konnte ich auf die tatsächliche Fehlermeldung im Angular-Code zugreifen.

Kommentare (3)

Bei mir wurde es durch eine serverseitige JsonSerializerException verursacht.

Eine unbehandelte Ausnahme ist während der Ausführung der Anfrage aufgetreten Newtonsoft.Json.JsonSerializationException: Selbstreferenzierende Schleife entdeckt mit Typ ...

Der Client sagte:

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

Die Vereinfachung des Antworttyps durch Beseitigung der Schleifen löste das Problem.

Perrier
Bearbeitete Antwort 11. Februar 2019 в 11:15
Kommentare (0)

Wenn Sie Laravel als Backend verwenden, dann bearbeiten Sie Ihre .htaccess-Datei, indem Sie einfach diesen Code einfügen, um das Problem CROS in Ihrem Angular- oder IONIC-Projekt zu lösen

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