Jeg bruker Angular 4 HttpClient
for å sende forespørsler til eksterne tjenester. Det er et veldig standard oppsett:
this.httpClient.get(url).subscribe(response => {
//do something with response
}, err => {
console.log(err.message);
}, () => {
console.log('completed');
}
Problemet er, når forespørselen mislykkes, ser jeg en generisk
Http failure response for (unknown url): 0 Ukjent feil
melding i konsollen. I mellomtiden, når jeg inspiserer den mislykkede forespørselen i krom, kan jeg se at svarstatusen er 422, og i "forhåndsvisning" -fanen ser jeg den faktiske meldingen som beskriver feilårsaken.
Hvordan får jeg tilgang til den faktiske svarmeldingen jeg kan se i chrome dev-verktøy?
Her er et skjermbilde som viser problemet: ]1
Problemet var relatert til CORS. Jeg la merke til at det var en annen feil i Chrome-konsollen: Ingen 'Access-Control-Allow-Origin' header er til stede på den forespurte ressursen. Origin 'http://localhost:4200' er derfor ikke tillatt tilgang. Svaret hadde HTTP-statuskode 422.
Dette betyr at svaret fra backend-serveren manglet Access-Control-Allow-Origin
header, selv om backend nginx var konfigurert til å legge til disse overskriftene i svarene med add_header
-direktivet.
Dette direktivet legger imidlertid bare til overskrifter når svarkoden er 20X eller 30X. På feilsvar manglet overskriftene. Jeg trengte å bruke always
-parameteren for å sikre at overskriften legges til uavhengig av svarkoden:
add_header 'Access-Control-Allow-Origin ' 'http://localhost:4200' always;
Når backend var riktig konfigurert, kunne jeg få tilgang til den faktiske feilmeldingen i Angular-koden.
For meg var det forårsaket av en JsonSerializerException på serversiden.
Et ubehandlet unntak har oppstått under utførelsen av forespørselen Newtonsoft.Json.JsonSerializationException: Selvrefererende løkke oppdaget med type ...
Klienten sa:
POST http://localhost:61495/api/Action net::ERR_INCOMPLETE_CHUNKED_ENCODING
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}
Å gjøre responstypen enklere ved å eliminere løkkene løste problemet.
Hvis du bruker Laravel som Backend, kan du redigere .htaccess-filen din ved å bare lime inn denne koden for å løse problemet CROS i Angular- eller IONIC-prosjektet ditt
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"