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 : 14/09/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 on 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 Configuration CORS pour obtenir des 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 à Amazon S3 :

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

Pour activer CORS pour S3 ou pour une origine personnalisée, vous devez transmettre les en-têtes nécessaires à l'origine. CloudFront dispose de deux politiques prédéfinies en fonction du type d'origine utilisé : CORS-S3Origin et CORS-CustomOrigin. Pour ajouter ces politiques à votre distribution, 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 sélectionnez un comportement existant, puis choisissez Edit (Modifier).
  4. Sous Cache key and origin requests (Clé de cache et demandes d'origine), choisissez Cache policy and origin request policy (Politique de cache et politique de demande d'origine). Ensuite, pour Origine request policy (Politique de demande d'origine), choisissez Cors-S3Origin ou CORS-CustomOrigin dans la liste déroulante. Pour plus d'informations, consultez Utilisation des politiques de demande d'origine gérées.
    Remarque : pour créer votre propre politique de cache, consultez les sections suivantes.
  5. Choisissez Save Changes (Enregistrer les modifications). Si vous créez le comportement, choisissez Create Behavior (Créer un comportement).

Pour transférer les en-têtes à l'aide d'une politique de demande d'origine, 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 settings (Paramètres de clé de cache), pour Headers (En-têtes), sélectionnez Include the following headers (Inclure les en-têtes suivants). Dans la liste déroulante Add header (Ajouter un en-tête), choisissez l'un des 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 sélectionnez un comportement existant, puis choisissez Edit (Modifier).
  4. Sous Cache key and origin requests (Clé de cache et demandes d'origine), sélectionnez Legacy cache settings (Paramètres de cache hérités).
  5. Dans la liste déroulante Headers (En-têtes), choisissez les en-têtes requis par votre origine. Si nécessaire, choisissez Add custom (Ajouter personnalisé) pour ajouter les en-têtes requis par votre origine qui ne figurent pas dans la liste déroulante.
  6. Choisissez Save Changes (Enregistrer les modifications). Si vous créez le comportement, choisissez Create Behavior (Créer un comportement).

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 sélectionnez un comportement existant, puis choisissez Edit (Modifier).
  4. Pour Allowed HTTP Methods (Autoriser les méthodes HTTP), sélectionnez GET, HEAD, OPTIONS.
  5. Choisissez Save Changes (Enregistrer les modifications). Si vous créez le comportement, choisissez Create Behavior (Créer un comportement).

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, invalidez 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 ?