Jeg får "Http-fejlsvar for (ukendt url): 0 Unknown Error" i stedet for den faktiske fejlmeddelelse i Angular

Jeg bruger Angular 4 HttpClient til at sende anmodninger til ekstern tjeneste. Det er en meget standardopsætning:

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

Problemet er, at når anmodningen mislykkes, ser jeg en generisk Http failure response for (unknown url): 0 Unknown Error-meddelelse i konsollen. I mellemtiden, når jeg inspicerer den mislykkede anmodning i chrome kan jeg se svarstatus er 422, og i "preview" fanen ser jeg den faktiske meddelelse, der beskriver fejlårsagen.

Hvordan får jeg adgang til den faktiske svarmeddelelse, som jeg kan se i chrome dev tools?

Her's et skærmbillede, der demonstrerer problemet: []]1

Løsning

Problemet var relateret til CORS. Jeg bemærkede, at der var en anden fejl i Chrome-konsollen:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' er derfor ikke tilladt adgang. Svaret havde HTTP-statuskode 422.`

Det betyder, at svaret fra backend-serveren manglede Access-Control-Allow-Origin-headeren, selv om backend nginx var konfigureret til at tilføje disse headere til svarene med add_header-direktivet.

Dette direktiv tilføjer dog kun headere, når svarkoden er 20X eller 30X. Ved fejlsvar manglede overskrifterne. Jeg var nødt til at bruge parameteren always for at sikre, at overskriften tilføjes uanset svarkoden:

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

Da backend'en var korrekt konfigureret, kunne jeg få adgang til den faktiske fejlmeddelelse i Angular-kode.

Kommentarer (3)

For mig var det forårsaget af en JsonSerializerException på serversiden.

En ubehandlet undtagelse er opstået under udførelse af anmodningen Newtonsoft.Json.Json.JsonSerializationException: Self referencing loop opdaget med typen ...

klienten sagde:

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

Ved at gøre svartypen enklere ved at fjerne sløjferne blev problemet løst.

Kommentarer (0)

Hvis du bruger Laravel som din backend, skal du redigere din .htaccess-fil ved blot at indsætte denne kode for at løse problemet CROS i dit Angular- eller IONIC-projekt

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