Comment l'en-tête « Access-Control-Allow-Origin » permet-il le partage de ressources entre origines croisées (CORS) ?

Démystifier l'en-tête « Access-Control-Allow-Origin » dans CORS

Le partage de ressources d'origine croisée (CORS) permet au code JavaScript chargé à partir d'une origine d'accéder aux ressources d'une origine différente. Comprendre comment l'en-tête « Access-Control-Allow-Origin » facilite cet accès entre origines croisées est crucial.

Comment fonctionne « Access-Control-Allow-Origin »

Lorsqu'un client demande un ressource provenant d'une origine différente, le serveur peut répondre avec un en-tête 'Access-Control-Allow-Origin'. Cet en-tête spécifie quelles origines sont autorisées à accéder à la ressource. Le comportement par défaut est de refuser toutes les requêtes d'origine croisée.

Pour activer l'accès d'origine croisée, le serveur doit ajouter l'en-tête « Access-Control-Allow-Origin » à la réponse. La valeur de cet en-tête peut être soit un domaine spécifique (par exemple, « http://siteB.com »), soit « * », indiquant que toute origine est autorisée à accéder à la ressource.

Gestion non simple Requêtes

Pour les requêtes non simples, qui impliquent généralement des méthodes HTTP autres que GET ou POST ou des en-têtes de requête non standard, le navigateur envoie d'abord une requête OPTIONS de contrôle en amont. Cette requête vérifie si le serveur acceptera la requête prévue.

Si le serveur répond à la requête OPTIONS avec les en-têtes 'Access-Control-Allow-Headers' et 'Access-Control-Allow-Methods' appropriés, le Le navigateur procède à la demande réelle.

Exemple d'utilisation

Considérez les éléments suivants scénario :

Site A : https://siteA.com
Site B : https://siteB.com

Vers activer le code JavaScript téléchargé depuis le site A pour accéder aux ressources du site B :

1. Site A : Récupérez le code JavaScript du site B :

fetch('https://siteB.com/myCode.js')
  // ...

2. Site B : Servez 'myCode.js' avec l'en-tête 'Access-Control-Allow-Origin' :

Access-Control-Allow-Origin: https://siteA.com

3. JavaScript (Site A): Le code JavaScript peut désormais envoyer des requêtes au site B :

fetch('https://siteB.com/api/data')
  // ...

En comprenant comment fonctionne l'en-tête 'Access-Control-Allow-Origin', vous pouvez efficacement activer le cross -Partage des ressources d'origine, garantissant que le code JavaScript peut accéder de manière transparente aux ressources de différentes origines.

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!