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?
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.
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.
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.
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.
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)
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"
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.
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.
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:
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.
<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
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.
Mon erreur était que le fichier était trop volumineux (le noyau dotnet semble avoir une limite de ~ 25 Mo). Réglage
résolu le problème pour moi.
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.
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.