Pourquoi l'utilisation du mode « no-cors » de Fetch n'est-elle pas la solution pour gérer les requêtes d'origine croisée ?

Utilisation de Fetch avec le mode « sans cors »

L'API Fetch offre un moyen pratique d'envoyer des requêtes aux serveurs. Cependant, lors de l'accès à des ressources d'origine croisée, vous pouvez rencontrer l'erreur « Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. » Cette erreur indique une restriction de sécurité imposée par la politique de même origine.

Pour désactiver CORS dans Fetch, il est tentant d'utiliser l'option { mode: 'no-cors' }. Cependant, cette approche est incorrecte et indésirable.

Mode 'no-cors' : un faux pas

Le mode 'no-cors' empêche essentiellement le navigateur d'accéder à la réponse. corps et en-têtes. Cela signifie que votre code ne pourra pas traiter ou utiliser les données récupérées. Il est crucial de comprendre que la désactivation de CORS ne remplace pas la stratégie de même origine. Cela affecte uniquement la façon dont le navigateur gère la réponse.

La solution : proxy CORS

Au lieu de désactiver CORS, vous devez utiliser un proxy CORS. Un proxy agit comme intermédiaire entre votre code frontend et le serveur cible. Lorsque vous envoyez une demande via un proxy, celui-ci transmet la demande au serveur, reçoit la réponse et ajoute l'en-tête Access-Control-Allow-Origin nécessaire avant de le renvoyer à votre code. Cela permet à votre code d'accéder à l'origine croisée de la réponse.

Pour configurer un proxy CORS, vous pouvez utiliser les services existants ou déployer votre propre proxy à l'aide de plateformes comme Heroku.

Comprendre Requêtes d'origine croisée

Il est important de noter que même si vous pouvez accéder aux ressources d'origine croisée dans Postman, les navigateurs imposent des restrictions sur le code frontend exécuté dans des applications Web. Pour garantir l'accès aux ressources d'origine croisée, la réponse doit inclure l'en-tête Access-Control-Allow-Origin.

Réponses opaques : mises en garde

Alors que « no-cors » Le mode désactive CORS, il crée également des réponses opaques. Les réponses opaques présentent certaines limitations, notamment :

1. Impossible de lire les en-têtes de réponse ou le contenu du corps
2. Impossible d'utiliser la réponse dans des contextes non HTML (par exemple, $