Ik krijg "Http failure response for (unknown url): 0 Unknown Error" in plaats van de eigenlijke foutmelding in Angular

Ik'gebruik Angular 4 HttpClient om verzoeken naar externe service te sturen. Het is een zeer standaard setup:

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

Het probleem is, wanneer het verzoek mislukt zie ik een generieke Http failure response for (unknown url): 0 Unknown Error bericht in console. Ondertussen, wanneer ik het mislukte verzoek in chrome inspecteer kan ik zien dat de antwoordstatus 422 is, en in het "preview" tabblad zie ik het eigenlijke bericht dat de mislukte oorzaak beschrijft.

Hoe krijg ik toegang tot het eigenlijke antwoordbericht dat ik kan zien in chrome dev tools?

Hier's een screenshot demonstreren van het probleem:

Patrick
Bewerkte vraag 12de0 maart 2018 в 9:08
Programmering
angular typescript
8ste2 november 2017 в 1:10
330 views
Oplossing

Het probleem had te maken met CORS. Ik merkte dat er een andere fout was in Chrome console:

Geen 'Access-Control-Allow-Origin' header is aanwezig op de gevraagde bron. Origin 'http://localhost:4200' heeft daarom geen toegang. Het antwoord had HTTP-statuscode 422.`

Dit betekent dat de Access-Control-Allow-Origin header ontbrak in het antwoord van de backend server, ondanks dat backend nginx was geconfigureerd om deze headers toe te voegen aan de antwoorden met add_header directive.

Echter, deze directive voegt alleen headers toe wanneer de response code 20X of 30X is. Op fout antwoorden ontbraken de headers. Ik moest de always parameter gebruiken om er zeker van te zijn dat de headers worden toegevoegd, ongeacht de response code:

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

Zodra de backend correct was geconfigureerd kon ik de werkelijke foutmelding in Angular code openen.

Commentaren (3)

Bij mij werd het veroorzaakt door een server side JsonSerializerException.

Er is een niet-afgehandelde uitzondering opgetreden tijdens het uitvoeren van het verzoek Newtonsoft.Json.JsonSerializationException: Self referencing loop gedetecteerd met type ...

De klant zei:

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

Door het response type eenvoudiger te maken door de lussen te elimineren is het probleem opgelost.

Perrier
Bewerkt antwoord 11de0 februari 2019 в 11:15
Commentaren (0)

Als je Laravel gebruikt als je Backend, bewerk dan je .htaccess bestand door gewoon deze code te plakken, om probleem CROS op te lossen in je Angular of IONIC project

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