Comment résoudre l'erreur « Aucun en-tête « Access-Control-Allow-Origin » » lors de la récupération de données à partir d'une API REST ?

"Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée" lors de la récupération des données à partir d'une API REST

Lors de la tentative de récupération des données depuis une API REST lorsque vous travaillez sur un hôte local, vous pouvez rencontrer le message d'erreur « L'API de récupération ne peut pas se charger. La réponse à la demande de contrôle en amont ne réussit pas le contrôle de contrôle d'accès : Non L'en-tête 'Access-Control-Allow-Origin' est présent sur la ressource demandée." Cette erreur provient de la « politique de même origine » appliquée par les navigateurs, qui empêche les ressources de différentes origines (domaines, ports et protocoles) d'interagir les unes avec les autres.

Surmonter l'erreur

Utiliser un Proxy CORS

Si vous manquez de contrôle sur le serveur hébergeant votre API REST et que le seul problème avec ses réponses est l'absence des éléments requis Access-Control-Allow-Origin, vous pouvez exploiter un proxy CORS pour faciliter la demande.

Voici les étapes pour configurer votre propre proxy :

1. Clonez le référentiel : git cloner https://github.com/Rob--W/cors-anywhere.git
2. Accédez au répertoire cloné : cd cors-anywhere/
3. Installer les dépendances : npm install
4. Créer une instance Heroku : heroku create
5. Déployer le proxy : git push heroku master

Une fois déployé, préfixez l'URL de votre API REST avec l'URL du proxy généré. Par exemple : https://cryptic-headland-94862.herokuapp.com/https://example.com.

Éviter le contrôle en amont CORS

La requête dans la question déclenche une demande de contrôle en amont due à l’inclusion de l’en-tête Authorization. Pour éviter ce contrôle en amont, envisagez d'utiliser l'une des techniques suivantes :

• Omettez l'en-tête Authorization de la requête initiale.
• Utilisez un mécanisme d'authentification différent, tel que l'intégration des données d'authentification dans le fichier corps de la requête ou paramètres de requête.
• Modifiez le serveur pour accepter les requêtes POST avec un corps Content-Type: application/x-www-form-urlencoded contenant un Paramètre au format JSON.

Résolution de « L'en-tête Access-Control-Allow-Origin ne doit pas être le caractère générique »

Pour les requêtes impliquant des informations d'identification, les navigateurs restreignent l'accès au code JavaScript frontal au réponse si la valeur de l’en-tête Access-Control-Allow-Origin est « * ». Dans de tels cas, la valeur doit correspondre précisément à l'origine de votre code frontend (par exemple, http://127.0.0.1:3000).

Remarque : Évitez d'utiliser les plugins Chrome CORS, car ils injectent simplement un en-tête générique Access-Control-Allow-Origin: * dans les réponses, ce qui peut conduire à un comportement inattendu. Utilisez les commandes curl avec l'indicateur -H pour des tests fiables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!