Comment puis-je accéder à des ressources de différentes origines à l'aide de Fetch lorsque le « mode : 'no-cors » échoue ?

Essayer d'utiliser Fetch avec le mode : no-cors

Dans cet article, nous aborderons le problème de l'utilisation de Fetch avec le mode : « no-cors » et explorez des alternatives viables pour désactiver CORS.

Comprendre le problème

Quand En tentant d'accéder à une ressource à partir d'une origine différente, telle qu'une API externe, les navigateurs mettent en œuvre une mesure de sécurité connue sous le nom de politique de même origine. Cette stratégie empêche le code JavaScript d'accéder directement aux ressources d'autres origines à moins que le serveur ne réponde avec les en-têtes CORS appropriés.

Lorsque vous rencontrez l'erreur « Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. ," cela signifie que le serveur à partir duquel vous essayez de récupérer des données n'autorise pas l'accès à ses ressources depuis votre origine actuelle.

Désactivation CORS

Il est important de noter que le mode de réglage : 'no-cors' dans votre demande de récupération ne désactive pas réellement CORS. Au lieu de cela, cela empêche votre code JavaScript frontal d'accéder au corps et aux en-têtes de la réponse. Dans la plupart des cas, ce n'est pas ce que vous avez l'intention de faire.

Utiliser un proxy CORS

La solution recommandée consiste à utiliser un proxy CORS. Un proxy CORS agit comme intermédiaire entre votre code frontend et le serveur cible. Il envoie la requête au serveur cible, reçoit la réponse, ajoute les en-têtes CORS nécessaires, puis renvoie la réponse modifiée à votre code frontend. Cela permet à votre code frontend d'accéder à la ressource sans violer directement la politique de même origine.

Déploiement de votre propre proxy CORS

Vous pouvez facilement déployer votre propre proxy CORS Anywhere en suivant ces étapes :

1. Cloner le dépôt CORS Anywhere : git clone https://github.com/Rob--W/cors-anywhere.git
2. Changement vers le répertoire cors-anywhere : cd cors-anywhere/
3. Installer les dépendances : npm install
4. Créer une application Heroku : heroku create
5. Pousser le code vers Heroku : git push heroku master

Après ces étapes, vous aurez votre propre serveur CORS Anywhere fonctionnant sur Heroku.

Utilisation du proxy CORS

Pour utiliser votre proxy CORS, il suffit préfixez l'URL de votre requête avec l'URL du proxy, par exemple :

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

En utilisant un proxy CORS, vous pouvez contourner le politique de même origine et accédez à des ressources d'origines différentes dans votre code frontend.

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!