web-dev-qa-db-fra.com

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

J'utilise Angular 4 HttpClient pour envoyer des demandes à un service externe. C'est 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 demande échoue, je vois un message générique Http failure response for (unknown url): 0 Unknown Error dans la console. Dans l'intervalle, lorsque j'inspecte la demande ayant échoué en chrome, l'état de la réponse est 422 et dans l'onglet "Aperçu", la cause réelle de l'échec du message. 

Comment 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:  enter image description here

angulartypescript
60
grdl

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

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

Cela signifie que l'en-tête Access-Control-Allow-Origin manquait dans la réponse du serveur principal, même si nginx principal était configuré pour ajouter ces en-têtes aux réponses avec add_header directive .

Cependant, cette directive ajoute uniquement les en-têtes lorsque le code de réponse est 20X ou 30X. En cas 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 que le système était correctement configuré, je pouvais accéder au message d'erreur réel en code angulaire.

55
grdl

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

 enter image description here

6
Dwi Yanuar Ilham

Cette erreur se produisait pour moi dans Firefox, mais pas dans Chrome lors du développement local, et elle s’est avérée être due au fait que Firefox ne faisait pas confiance au certificat ssl de mon API locale (qui n’est pas valide, mais que j’avais ajouté à mon certificat local. magasin, qui laisse chrome faire confiance, mais pas ff). La navigation directe vers l'API et l'ajout d'une exception dans Firefox ont résolu le problème.

3
frax

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 demande Newtonsoft.Json.JsonSerializationException: Boucle de référence automatique détecté 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.

3
Perrier

Une erreur similaire peut se produire lorsque vous n'avez pas fourni de certificat client valide et de jeton compris par votre serveur:

Erreur:

Réponse d'échec HTTP pour (URL inconnue): 0 Erreur inconnue

Exemple de code:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

class MyCls1 {

  constructor(private http: HttpClient) {
  }

  public myFunc(): void {

    let http: HttpClient;

    http.get(
      'https://www.example.com/mypage',
      {
        headers:
          new HttpHeaders(
            {
              'Content-Type': 'application/json',
              'X-Requested-With': 'XMLHttpRequest',
              'MyClientCert': '',        // This is empty
              'MyToken': ''              // This is empty
            }
          )
      }
    ).pipe( map(res => res), catchError(err => throwError(err)) );
  }

}

Notez que les deux MyClientCert & MyToken sont des chaînes vides, d’où l’erreur.
MyClientCert & MyToken peuvent être n’importe quel nom compris par votre serveur.

2
Manohar Reddy Poreddy

Si les gars utilisent l’application .net ci-dessous, cette étape pourrait vous être utile!

MoreOver ce n'est pas Angular ou autre erreur de requête dans votre application FrontEnd

Premièrement, vous devez ajouter le package Microsoft CORS de Nuget. Si vos gars ne sont pas ajoutés à votre application, suivez la commande d'installation.

Install-Package Microsoft.AspNetCore.Cors

Vous devez ensuite ajouter les services CORS. Dans votre startup.cs de votre méthode ConfigureServices, vous devriez avoir quelque chose de similaire au suivant:

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

Ensuite, vous devez ajouter le middleware CORS à votre application. Dans votre startup.cs, vous devriez avoir une méthode Configure. Vous devez l'avoir semblable à ceci:

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

Les options lambda sont une API fluide, vous pouvez donc ajouter/supprimer tous les extras dont vous avez besoin. Vous pouvez réellement utiliser l'option "AllowAnyOrigin" pour accepter n'importe quel domaine, mais je vous recommande vivement de ne pas le faire car cela ouvre des appels croisés d'origine de quiconque. Vous pouvez également limiter les appels inter-origines à leur méthode HTTP (GET/PUT/POST, etc.) afin que vous puissiez uniquement exposer les appels GET entre domaines, etc.

Merci vous sathish (samedi)

2
sathish

Si vous utilisez Laravel comme backend, éditez votre fichier .htaccess en collant 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"
1
shirjeel khan

J'utilise ASP.NET SPA Extensions, qui crée un proxy sur les ports 5000 et 5001 qui passe au port 4200 d'Angular lors du développement.

CORS était correctement configuré pour le port https 5001 et tout allait bien, mais par inadvertance, je suis allé vers un ancien signet qui était pour le port 5000. Puis, tout à coup, ce message est apparu. Comme d'autres l'ont dit dans la console, il y avait un message d'erreur 'preflight'.

Donc, quel que soit votre environnement, si vous utilisez CORS, assurez-vous que tous les ports sont spécifiés, car l'hôte et le port importent tous les deux. 

1
Simon_Weaver

N’est pas aussi vieux que d’autres questions, mais j’ai juste eu du mal avec cela dans une application Ionic-Laravel, et rien ne fonctionne à partir d’ici (et d’autres posts), j’ai donc installé https://github.com/barryvdh/laravel-cors complément à Laravel et a commencé et cela fonctionne assez bien.

0
gersonmontenegro

Au cas où quelqu'un d'autre se retrouverait aussi perdu que moi ... Mes problèmes n'étaient pas dus à CORS (j'ai le contrôle total du (des) serveur (s) et CORS a été configuré correctement!).

Mon problème était dû au fait que j'utilisais la plate-forme Android de niveau 28 qui désactive les communications réseau en texte clair par défaut et que j'essayais de développer l'application qui pointe sur l'adresse IP de mon ordinateur portable (qui exécute le serveur API). L'URL de base de l'API est quelque chose comme http: // [LAPTOP_IP]: 8081 . Comme ce n'est pas https , la vue Web Android bloque complètement le transfert de réseau entre le téléphone/l'émulateur et le serveur de mon ordinateur portable. Pour résoudre ce problème:

Ajouter une configuration de sécurité réseau

Nouveau fichier dans le projet: ressources/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>

NOTE: Ceci doit être utilisé avec précaution car il autorisera tous les textes en clair de votre application (rien ne force l’utilisation de https). Vous pouvez le restreindre davantage si vous le souhaitez.

Référencez la config dans le fichier config.xml principal

<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>

C'est tout! À partir de là, j'ai reconstruit l'APK et l'application était maintenant capable de communiquer à la fois depuis l'émulateur et le téléphone.

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

0
haggy

Le mien a été provoqué par une relation invalide dans les modèles que j'essayais d'interroger. Déterminé en déboguant la réponse, il s'est écrasé à la relation.

0
J.Kirk.

Mon erreur était que le fichier était trop volumineux (le noyau dotnet semble avoir une limite de ~ 25 Mo). Réglage

  • maxAllowedContentLength à 4294967295 (valeur maximale de uint) dans web.config
  • décorer l'action du contrôleur avec [DisableRequestSizeLimit]
  • services.Configure (options => {options.MultipartBodyLengthLimit = 4294967295;}); dans Startup.cs

résolu le problème pour moi.

0
Spikolynn

Si vous avez un bon en-tête cors en place. Votre réseau d'entreprise est peut-être en train de retirer l'en-tête cors. Si le site Web est accessible de l'extérieur, essayez d'y accéder depuis l'extérieur de votre réseau pour vérifier si le réseau est à l'origine du problème - une bonne idée, quelle qu'en soit la cause.

0
N-ate

Bien, j'ai eu la même erreur, après avoir cherché tous les commentaires ici, rien n’a aidé. Enfin, il s’avère que mon serveur de noeud n’était pas en cours d’exécution.

0
Imran Hussain