CORRECTIF: aucune erreur d'en-tête access-control-allow-origin dans Angular

L'un des messages d'erreur les plus courants que les développeurs angulaires peuvent rencontrer dans leur travail quotidien est :

pas d'en-tête access-control-allow-origin présent sur la ressource demandée.

Ce n'est pas un problème angulaire spécifique, mais un CORS (Cross-Origin Resource Sharing) problème d'en-tête. Cela peut signifier que le serveur principal est configuré pour fonctionner sur un autre port ou domaine.

---

Comment corriger l'erreur Pas de contrôle d'accès sur Windows 10 ?

1. Apporter des modifications au niveau du serveur

Si vous avez accès au serveur, activez les requêtes CROS en ajoutant Contrôle d'accès-Autoriser-Origine: * entête. Après cela, configurez cors entrée, sous system.webServer dans web.config fichier, comme dans l'exemple ci-dessous.

• ”1.0″?
• activé="vrai">
• origine=“ https://someorigin.domain.com”>
• méthode="OBTENIR"/>
• méthode="DIRIGER"/>
• </system.webServer>

Ici, cors permettra OBTENIR et DIRIGER demandes de https://someorigin.domain.com/.

De plus, si vous utilisez IIS (services d'information Internet) il faudrait télécharger Module IIS CORS.

Attention à bien spécifier un domaine ou une liste de domaines au lieu de *. Sinon, les demandes d'origine croisée au serveur seraient activées de n'importe où.

Au Apache, dans le fichier de configuration, vous devez ajouter la ligne Ensemble d'en-tête Access-Control-Allow-Origin '*'. Encore une fois, il est sage de remplacer le « * » par une liste de sources à partir desquelles les demandes seraient faites.

---

2. Exécutez votre propre serveur proxy

1. Tout d'abord, nous allons créer un fichier de configuration proxy, dans le dossier racine Angular, appelé src/proxy.conf.json, et écrivez le code suivant dedans:
   • {"/api":
   • "cible":" http://localhost: 6000","sécurisé": false }
   • }
2. Deuxièmement, dans le angular.jsonfichier, ajoutez le proxyConfigoption dans le servir cible:
   • "servir": {
   • "constructeur":" ",
     
   • "options":{"configuration proxy":"src/proxy.conf.json"}
     
   • }
3. Exécutez maintenant la configuration actuelle avec le servir commander.

Un serveur proxy transmettrait vos requêtes au serveur distant. Ensuite, nous allons voir comment configurer un serveur proxy.

Les demandes de données dans Angular sont des appels d'API à localhost, sur le port 4200, comme cet emplacement :

• http://localhost: 4200/api/datareq.

Cependant, dans l'exemple ci-dessus, nous avons supposé que les données demandées sont à ce lieu:

• http://localhost: 6000/api/datareq.

---

Intéressé par de bonnes solutions de proxy? Consultez cette liste d'outils dédiés

---

3. rédésactivez la politique de même origine dans votre navigateur

Noter: cette méthode particulière n'est pas recommandée car elle peut exposer votre navigateur (et votre système) à des risques de sécurité majeurs.

Si tout le reste ne fonctionne pas, vous pouvez désactiver la politique de même origine dans le navigateur. Soyez cependant prudent, car cela exposerait votre navigateur (et votre système) à des risques de sécurité majeurs.

Pour Google Chrome, sous Windows 10, ouvrez l'invite de commande en tant qu'administrateur et exécutez la commande suivante :

C: Program Files (x86)GoogleChromeApplicationchrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp..

En conclusion, pas d'en-tête access-control-allow-origin présent sur la ressource demandée le message d'erreur est un problème côté serveur.

Pour les développeurs angulaires, la modification de la configuration du serveur ou l'utilisation d'un serveur proxy devrait fonctionner correctement.

Dites-nous ce que vous pensez de ce guide dans la section commentaires ci-dessous.

---

---