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 ?

Date de la dernière mise à jour : 29/06/2020

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 résoudre 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.

Ré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 stratégie 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 stratégie CORS d'une origine sur NGINX, consultez CORS sur Nginx pour connaître les instructions. Pour mettre à jour la stratégie d'une origine qui est un compartiment Amazon Simple Storage Service (Amazon S3), consultez Activation 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 le partage 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 envoyer les en-têtes depuis 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 Cache Based on Selected Request Headers (Cache basé sur les en-têtes de demande sélectionnés), choisissez Whitelist (Liste blanche).
  5. Sous Whitelist Headers (En-têtes en liste blanche), choisissez le menu sur la gauche, puis Add (Ajouter).
  6. Sélectionnez Yes, Edit (Oui, Modifier).

Remarque : veillez également à transmettre l'en-tête dans le cadre de votre requête client à CloudFront, requête que CloudFront transmet à l'origine.

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

Si les erreurs persistent après la mise à jour de votre stratégie CORS et la transmission des en-têtes appropriés, essayez d'autoriser la méthode HTTP OPTIONS dans le comportement du 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 (Méthodes HTTP autorisées), sélectionnez GET, HEAD, OPTIONS.
  5. Sélectionnez Yes, Edit (Oui, modifier).

Remarque : CloudFront déploie généralement les modifications apportées à votre distribution en cinq minutes.


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


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