J'utilise le HttpClient
d'Angular 4 pour envoyer des requêtes à un service externe. Il s'agit d'une configuration très standard :
this.httpClient.get(url).subscribe(response => {
//do something with response
}, err => {
console.log(err.message);
}, () => {
console.log('completed');
}
Le problème est que lorsque la requête échoue, je vois une réponse générique de type
Réponse d'échec HTTP pour (url inconnue) : 0 Erreur inconnue
dans la console. En même temps, lorsque j'inspecte la requête qui a échoué dans chrome, je peux voir que le statut de la réponse est 422, et dans l'onglet "preview" ; je vois le message actuel décrivant la cause de l'échec.
Comment puis-je accéder au message de réponse réel que je peux voir dans les outils de développement de chrome ?
Voici une capture d'écran illustrant le problème : [!entrer la description de l'image ici][1]][1]
Le problème était lié à [CORS][1]. J'ai remarqué qu'il y avait une autre erreur dans la console Chrome :
No 'Access-Control-Allow-Origin' ; header is present on the requested resource. L'origine 'http://localhost:4200' ; n'est donc pas autorisée à accéder. La réponse avait un code d'état HTTP 422.
Cela signifie que la réponse du serveur dorsal était dépourvue de l'en-tête Access-Control-Allow-Origin
, même si le serveur dorsal nginx était configuré pour ajouter ces en-têtes aux réponses avec la [directive add_header
][2].
Cependant, cette directive n'ajoute les en-têtes que lorsque le code de réponse est 20X ou 30X. Pour les réponses d'erreur, les en-têtes étaient manquants. J'avais besoin d'utiliser le paramètre always
pour m'assurer que l'en-tête est ajouté quel que soit le code de réponse :
add_header 'Access-Control-Allow-Origin' ; 'http://localhost:4200' ; always;
Une fois le backend correctement configuré, j'ai pu accéder au message d'erreur réel dans le code Angular.
[1] : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS [2] : http://nginx.org/en/docs/http/ngx_http_headers_module.html
Pour moi, cela a été causé par une exception JsonSerializerException côté serveur.
Une exception non gérée s'est produite lors de l'exécution de la requête.
Newtonsoft.Json.JsonSerializationException : Boucle d'auto-référencement détectée avec le type ...
Le client a dit :
POST http://localhost:61495/api/Action net::ERR_INCOMPLETE_CHUNKED_ENCODING
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}
Le fait de simplifier le type de réponse en éliminant les boucles a résolu le problème.
Si vous utilisez Laravel comme backend, modifiez votre fichier .htaccess en collant simplement ce code, pour résoudre le problème CROS dans votre projet Angular ou IONIC.
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"