Comment éliminer l'erreur « No Access-Control-Allow-Origin header is present on the requested resource » (Aucun en-tête Access-Control-Allow-Origin présent dans la ressource demandée) depuis CloudFront ?

Dernière mise à jour : 19-01-2021

J'envoie l'en-tête d'origine de ma distribution Amazon CloudFront et je reçois l'erreur « No Access-Control-Allow-Origin header is present on the requested resource » (Aucun en-tête Access-Control-Allow-Origin présent dans la ressource demandée). Comment éliminer cette erreur ?

Brève description

Pour éviter l'erreur « No Access-Control-Allow-Origin header is present on the requested resource » (Aucun en-tête Access-Control-Allow-Origin présent dans la ressource demandée), vérifiez les points suivants :

  • Le partage des ressources entre origines (CORS, Cross-Origin Resource Sharing) de l'origine permet à cette dernière de renvoyer l'en-tête « Access-Control-Allow-Origin ».
  • La distribution CloudFront transmet les en-têtes appropriés.
  • Le comportement du cache de la distribution CloudFront autorise la méthode OPTIONS pour les requêtes HTTP.

Solution

La stratégie CORS de l'origine autorise cette dernière à retourner l'en-tête « Access-Control-Allow-Origin ».

Vérifiez que l'origine retourne l'en-tête « Access-Control-Allow-Origin », en exécutant une commande curl similaire à celle ci-dessous :

curl -H "origin: example.com" -v "https://www.anything.net/video/call/System.generateId.dwr"

Si la politique CORS permet à l'origine de retourner l'en-tête, la commande produit un message similaire à celui-ci :

HTTP/1.1 200 OK
Server: nginx/1.10.2
Date: Mon, 01 May 2018 03:06:41 GMT
Content-Type: text/html
Content-Length: 3770
Last-Modified: Thu, 16 Mar 2017 01:50:52 GMT
Connection: keep-alive
ETag: "58c9ef7c-eba"
Access-Control-Allow-Origin:
    example.com
Accept-Ranges: bytes

Pour mettre à jour la politique CORS d'une origine sur NGINX, consultez CORS sur Nginx pour connaître les instructions. Pour mettre à jour la politique d'une origine qui est un compartiment Amazon Simple Storage Service (Amazon S3), consultez Activation du partage des ressources entre origines (CORS) pour connaître les instructions.

La distribution CloudFront transmet les en-têtes appropriés.

Après avoir défini CORS sur votre origine, configurez votre distribution CloudFront pour qu'elle envoie les en-têtes nécessaires à votre origine. Si votre origine est un compartiment S3, vous devez généralement configurer votre distribution pour transmettre les en-têtes suivants dans Amazon S3 :

  • Access-Control-Request-Headers
  • Access-Control-Request-Method
  • Origine

Pour transférer les en-têtes à l'aide d'une politique de cache, procédez comme suit :

  1. Suivez les étapes pour créer une politique de cache à l'aide de la console CloudFront.
  2. Sous Cache key contents (Contenu de la clé de cache), pour Headers (En-têtes), sélectionnez Whitelist (Ajouter sur une liste blanche). Dans la liste des en-têtes, sélectionnez l'un des en-têtes requis par votre origine. Ensuite, choisissez Add header (Ajouter un en-tête). Répétez cette étape pour tous les en-têtes requis par votre origine.
  3. Complétez tous les autres paramètres de la politique de cache en fonction des exigences du comportement auquel vous associez la politique.
  4. Suivez les étapes pour associer la politique de cache au comportement de votre distribution CloudFront.

Pour transférer les en-têtes à l'aide des paramètres de cache existants, procédez comme suit :

  1. Ouvrez votre distribution depuis la console CloudFront.
  2. Choisissez l'onglet Behaviors (Comportements).
  3. Choisissez Create Behavior (Créer un comportement) ou un comportement existant, puis Edit (Modifier).
  4. Pour Cache and origin request settings (Paramètres de demande de cache et d'origine), sélectionnez Use legacy cache settings (Utiliser les paramètres de cache existants). 
  5. Pour Cache Based on Selected Request Headers (Cache basé sur les en-têtes de demande sélectionnés), choisissez Whitelist (Ajouter sur une liste blanche).
  6. Sous Whitelist Headers (Ajouter les en-têtes sur une liste blanche), choisissez les en-têtes requis par votre origine dans le menu de gauche. Choisissez Add (Ajouter).
  7. Choisissez Yes, Edit (Oui, modifier).

Remarque : veillez également à transmettre l'en-tête dans votre demande client à CloudFront qui la transmet à l'origine.

Le comportement du cache de la distribution CloudFront autorise la méthode OPTIONS pour les demandes HTTP.

Si les erreurs persistent après la mise à jour de votre politique CORS et la transmission des en-têtes appropriés, essayez d'autoriser la méthode HTTP OPTIONS dans le comportement de cache de votre distribution. Par défaut, CloudFront autorise uniquement les méthodes GET et HEAD, mais certains navigateurs Web peuvent émettre des demandes pour la méthode OPTIONS.

Pour activer la méthode OPTIONS sur votre distribution CloudFront, procédez comme suit :

  1. Ouvrez votre distribution depuis la console CloudFront.
  2. Choisissez l'onglet Behaviors (Comportements).
  3. Choisissez Create Behavior (Créer un comportement) ou un comportement existant, puis Edit (Modifier).
  4. Pour Allowed HTTP Methods (Autoriser les méthodes HTTP), sélectionnez GET, HEAD, OPTIONS.
  5. Choisissez Yes, Edit (Oui, modifier).

Remarque : CloudFront déploie généralement les modifications dans votre distribution dans un délai de cinq minutes. Après avoir apporté des modifications à votre distribution, envisagez d'invalider le cache afin d’éviter de recevoir toujours les réponses précédemment mises en cache.


Cet article vous a-t-il été utile ?


Besoin d'aide pour une question technique ou de facturation ?