Comment puis-je résoudre les erreurs de requête d'origine croisée lors de la récupération de données à l'aide de JavaScript ?

Essayer de désactiver CORS avec Fetch et gérer « Access-Control-Allow-Origin »

Vous avez rencontré un défi courant lorsque tenter des requêtes d'origine croisée à partir du code JavaScript de votre client à l'aide de Fetch. Le message d'erreur que vous avez reçu indique que le point de terminaison à partir duquel vous essayez de récupérer n'inclut pas l'en-tête « Access-Control-Allow-Origin », qui est requis pour l'accès multi-origine.

Problème : Vous essayez d'utiliser l'objet { mode: 'no-cors' } dans Fetch pour désactiver CORS, mais cette approche est incorrect.

Pourquoi le mode « no-cors » ne fonctionne pas :

Mode de réglage : « no-cors » dans Fetch ne désactive pas CORS ; au lieu de cela, il indique aux navigateurs d'empêcher votre JavaScript frontal d'accéder au corps et aux en-têtes de la réponse. Ce paramètre n'est généralement pas souhaitable, car vous souhaitez généralement que votre code puisse accéder à la réponse.

Solution : proxy CORS

La solution à ce problème réside dans en utilisant un proxy CORS. Un proxy CORS agit comme intermédiaire entre votre code frontend et le point de terminaison distant, permettant les requêtes d'origine croisée en modifiant les en-têtes de réponse.

En utilisant un proxy CORS, vous pouvez transmettre vos requêtes via le proxy, qui ajoutera l’en-tête Access-Control-Allow-Origin nécessaire à la réponse. Cela permet à votre code frontend d'accéder au corps de la réponse et aux en-têtes comme s'il provenait de la même origine.

Déployer votre propre proxy

Un moyen simple de déployer votre votre propre proxy CORS doit suivre ces étapes :

1. Cloner le référentiel GitHub cors-anywhere (https://github.com/Rob--W/cors-anywhere).
2. Installez les dépendances à l'aide de npm install.
3. Créez un compte Heroku et exécutez heroku create.
4. Poussez votre code vers Heroku à l'aide de git push heroku master.

Une fois déployé, vous aurez un CORS en cours d'exécution proxy à une URL telle que https://cryptic-headland-94862.herokuapp.com.

Préfixer l'URL de votre demande avec l'URL du proxy

Pour utiliser le proxy, préfixez simplement l’URL de votre demande avec l’URL du proxy. Par exemple, si vous souhaitez récupérer https://example.com, vous utiliserez l'URL suivante :

https://cryptic-headland-94862.herokuapp.com/https://example.com

En préfixant l'URL de la requête avec le proxy, vous pourrez effectuer des requêtes cross-origin avec succès, grâce à l'en-tête Access-Control-Allow-Origin ajouté par le proxy.

Considérations supplémentaires :

• Postman peut accéder au point de terminaison car il s'agit d'un outil de débogage qui ignore les restrictions de même origine.
• Utiliser le mode : 'no-cors' ou le mode : 'opaque' dans Fetch n'est pas la bonne approche à désactiver CORS.
• CORS est une mesure de sécurité, et il est important de ne pas la contourner avec désinvolture. Tenez toujours compte des implications en matière de sécurité avant de désactiver les restrictions CORS.

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!