J'obtiens "Réponse d'échec HTTP pour (url inconnue): 0 Erreur inconnue" au lieu du message d'erreur réel dans Angular

Question

Je suis en utilisant Angulaire 4 HttpClient pour envoyer des demandes de service externe. C'est un très configuration 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 demande échoue, je vois un générique Http failure response for (unknown url): 0 Unknown Error message dans la console. Pendant ce temps, quand j'ai inspecter l'échec de la requête dans google chrome, je peux voir l'état de la réponse à 422, et dans l ' "aperçu" de l'onglet, je vois le message réel desribing échec de la cause.

Comment puis-je accéder à la véritable message de réponse que je peux voir dans google chrome dev tools?

Voici une capture d'écran montrant le problème:

Answer 1

Le problème était lié à la SCRO. J'ai remarqué qu'il y avait une autre erreur dans la console Chromée:

Pas de "Access-Control-Allow-Origin' en-tête est présent sur la ressource demandée. Origine 'http://localhost:4200' est donc pas autorisé à accéder. La réponse avait le code d'état HTTP 422.`

Cela signifie que la réponse du serveur d'arrière-plan manquait Access-Control-Allow-Origin - tête même si backend nginx a été configuré de manière à ajouter des en-têtes pour les réponses en add_header directive.

Toutefois, cette directive ne ajoute des en-têtes lorsque le code de réponse est 20X ou 30X. Sur les réponses d'erreur les en-têtes ont disparu. J'avais besoin d'utiliser always paramètre assurez-vous d'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 a été configuré correctement, j'ai pu accéder véritable message d'erreur Angulaire code.

Answer 2

Dans le cas où quelqu'un d'autre se termine comme perdu, comme je l'ai été... Mes questions n'ont PAS été en raison de la SCRO (j'ai le contrôle total du serveur(s) et de la SCRO a été configuré correctement!).

Mon problème est que je suis en utilisant la plate-forme Android de niveau 28, qui désactive clair au réseau de communication par défaut et j'ai essayé de développer l'application qui pointe sur mon ordinateur portable IP (qui exécute le serveur d'API). L'API URL de base est quelque chose comme : http://[LAPTOP_IP]:8081. Puisqu'il n'est pas en https, webview android bloque complètement le réseau xfer entre le téléphone/émulateur et le serveur sur mon ordinateur portable. Afin de résoudre ce problème:

Ajouter un réseau de sécurité de config

Nouveau fichier au projet: resources/android/xml/network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <!-- Set application-wide security config -->
  <base-config cleartextTrafficPermitted="true"/>
</network-security-config>

REMARQUE: Cette fonction doit être utilisée avec précaution, car il permettra à tous les texte en clair à partir de votre application (rien de forcé d'utiliser le protocole https). Vous pouvez restreindre davantage si vous le souhaitez.

Référence du fichier de configuration principal config.xml

<platform name="android">
    ...
    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
        <application android:networkSecurityConfig="@xml/network_security_config" />
    </edit-config>
    <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
    ....
</platform>

Ça y est! À partir de là, j'ai reconstruit l'APK et l'application est maintenant en mesure de communiquer à la fois l'émulateur et téléphone.

Plus d'infos sur le réseau sec: https://developer.android.com/training/articles/security-config.html#CleartextTrafficPermitted

Answer 3

Si vous êtes en utilisant .net application de base ci-dessous l'étape peut être vous aider!

En outre, ce n'est pas Angulaire ou autre erreur de requête dans votre application FrontEnd

D'abord u les gars ont à ajouter de Microsoft de la SCRO paquet de Nuget. Si vous les gars ne sont pas ajoutés dans votre application, suivez les instructions d'installation de la commande.

Install-Package Microsoft.AspNetCore.Cors

Vous devez ensuite ajouter de la SCRO services. Dans votre démarrage.cs dans votre ConfigureServices méthode, vous devriez avoir quelque chose de similaire à la suivante :

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors();
}

Ensuite, vous devez ajouter de la SCRO middleware pour votre application. Dans votre démarrage.cs, vous devriez avoir une méthode Configure (). Vous devez avoir similaire à ceci :

public void Configure(IApplicationBuilder app, IHostingEnvironment env, 
ILoggerFactory loggerFactory)
{
    app.UseCors( options => 
    options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
    app.UseMvc();
}

Les options lambda est une API fluent de sorte que vous pouvez ajouter/supprimer tous les extras dont vous avez besoin. Vous pouvez réellement utiliser l'option "AllowAnyOrigin" à accepter n'importe quel domaine, mais je vous recommande fortement de ne pas faire cela, car elle ouvre origine de la croix-appels de tout le monde. Vous pouvez également limiter l'origine de la croix-des appels à leur Méthode HTTP (GET/PUT/POST etc) afin que vous ne pouvez exposer REÇOIS des appels de la croix de domaine, etc.

Merci sathish(sat)

Answer 4

travaillant pour moi après avoir désactivé l'extension de blocage des annonces en chrome, cette erreur est parfois due à un blocage de http dans le navigateur

Answer 5

Pour moi, cela était dû à 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: une boucle auto-référencée 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, …}
 

Rendre le type de réponse plus simple en éliminant les boucles a résolu le problème.