Comment puis-je contourner les erreurs « No Access-Control-Allow-Origin » lors de l'utilisation de Fetch ?

Travailler avec CORS dans les requêtes de récupération

Lors de l'accès à des ressources multi-origines à l'aide de la récupération, il est courant de rencontrer le message « Aucun contrôle d'accès – erreur "autoriser l'origine". Cela empêche JavaScript côté client d'accéder aux réponses en raison de restrictions d'origine croisée.

Passer { mode : 'no-cors' } pour récupérer

Contrairement aux attentes , { mode: 'no-cors' } ne résoudra pas le problème. Au lieu de cela, il bloque strictement l'accès JavaScript au corps de la réponse et au contenu de l'en-tête.

La solution : proxy CORS

Pour surmonter ce problème, un proxy CORS peut être utilisé. Un proxy se situe entre le client et le site Web cible. Il prend la demande, la transmet au site cible et reçoit la réponse. Surtout, le proxy ajoute l'en-tête de réponse « Access-Control-Allow-Origin », qui permet au code client d'accéder à la réponse.

Pourquoi Postman peut accéder au point de terminaison

Alors que Postman autorise l'accès au point de terminaison sans en-tête « Access-Control-Allow-Origin », les navigateurs Web imposent des restrictions d'origine croisée. Cet en-tête est obligatoire pour que JavaScript côté client puisse interagir avec la réponse.

Idée fausse sur la désactivation de CORS

Lorsque l'on vise à "désactiver CORS", ce qui est réellement prévu est désactiver la politique de même origine. CORS, en fait, offre un moyen d'assouplir cette politique en autorisant certains accès d'origine croisée.

Quand utiliser { mode : 'no-cors' }

{ mode: 'no-cors' } ne doit être envisagé que dans des scénarios spécifiques :

• Intégrer du contenu dans des éléments HTML à l'aide de JavaScript, mais pas directement via leurs attributs.
• Mise en cache d'une ressource à l'aide de Service Workers et de l'API Cache Storage.

Cependant, même dans ces cas, il existe des limites et des facteurs importants à prendre en compte.

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!