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) de CloudFront ?

Date de la dernière mise à jour : 16/06/2022

L'erreur CORS « No 'Access-Control-Allow-Origin' » (Aucun 'Access-Control-Allow-Origin') s'affiche concernant la ressource demandée dans Amazon CloudFront. Pourquoi est-ce que je reçois cette erreur et comment résoudre ce problème ?

Solution

Confirmer la politique de partage de ressources entre origines multiples (CORS, Cross-Origin Resource Sharing) de l'origine permet à celle-ci de renvoyer l'en-tête Access-Control-Allow-Origin

Remarque : si vous recevez des erreurs lors de l'exécution de commandes de l'Interface de la ligne de commande AWS (AWS CLI), vérifiez que vous utilisez la version la plus récente de l'AWS CLI.

Exécutez la commande suivante afin de confirmer que le serveur d'origine renvoie l'en-tête Access-Control-Allow-Origin. Remplacez example.com par l'en-tête d'origine requis. Remplacez https://www.example.net/video/call/System.generateId.dwr par l'URL de la ressource qui renvoie l'erreur d'en-tête.

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

Si la politique CORS autorise le serveur d'origine à renvoyer l'en-tête Access-Control-Allow-Origin, vous obtiendrez une réponse similaire à celle ci-dessous :

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

Si les en-têtes CORS ne sont pas renvoyés dans la réponse, cela signifie que le serveur d'origine n'est pas correctement configuré pour le CORS. Configurez une politique CORS sur votre origine personnalisée ou origine Amazon Simple Storage Service (Amazon S3).

Configuration de la distribution CloudFront permettant de transmettre les en-têtes appropriés au serveur d'origine

Après avoir configuré une politique CORS sur votre serveur d'origine, configurez votre distribution CloudFront afin de transmettre les en-têtes d'origine au serveur d'origine. Si votre serveur d'origine est un compartiment Amazon S3, configurez votre distribution afin de transmettre les en-têtes suivants à Amazon S3 :

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

Pour transmettre les en-têtes au serveur d'origine, CloudFront dispose de deux politiques prédéfinies en fonction de votre type d'origine : CORS-S3Origin et CORS-CustomOrigin.

Pour ajouter une politique prédéfinie à votre distribution :

  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 Origin request policy (Politique de demande d'origine), choisissez CORS-S3Origin ou CORS-CustomOrigin dans la liste déroulante. Afin d'obtenir plus d'informations, veuillez consulter la section Utilisation des politiques de demande d'origine gérées.
    Remarque : pour créer votre propre politique de cache, veuillez consulter la section Création de politiques de cache.
  5. Choisissez Create Behavior (Créer un comportement). Vous pouvez également choisir Save changes (Enregistrer les modifications) si vous modifiez un comportement existant.

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

  1. Créez une politique de cache.
  2. Sous Cache key settings (Paramètres de clé de cache), pour Headers (En-têtes), choisissez 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. Renseignez les paramètres de politique de cache en fonction du comportement auquel vous associez la politique.
  4. Attachez la politique de cache au comportement de votre distribution CloudFront.

Pour transférer les en-têtes à l'aide des paramètres de cache hérités :

  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. Choisissez Add custom (Ajouter un en-tête personnalisé) afin d'ajouter les en-têtes requis par votre origine qui n'apparaissent pas dans la liste déroulante.
  6. Choisissez Create Behavior (Créer un comportement). Vous pouvez également choisir Save changes (Enregistrer les modifications) si vous modifiez un comportement existant.
Remarque : veillez également à transmettre l'en-tête dans votre requête client à CloudFront, requête que CloudFront transmet à l'origine.

Configuration du comportement du cache de la distribution CloudFront permettant d'autoriser la méthode OPTIONS pour les requêtes HTTP

Si les erreurs persistent après la mise à jour de votre politique CORS et la transmission des en-têtes appropriés, autorisez 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. Cependant, certains navigateurs Web peuvent émettre des requêtes pour la méthode OPTIONS. Afin d'activer la méthode OPTIONS sur votre distribution CloudFront :
  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 (Méthodes HTTP autorisées), sélectionnez GET, HEAD, OPTIONS.
  5. Choisissez Create Behavior (Créer un comportement). Vous pouvez également choisir Save changes (Enregistrer les modifications) si vous modifiez un comportement existant.

Configuration de votre politique de réponse CloudFront permettant de renvoyer les en-têtes Access-Control-Allow-Origin requis

Si le serveur d'origine n'est pas accessible ou ne peut pas être configuré pour renvoyer les en-têtes CORS appropriés, configurez un CloudFront afin de renvoyer les en-têtes CORS requis. Pour configurer, créez des politiques d'en-têtes de réponse :

  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 Response headers policy (Politique d'en-têtes de réponse) :
    Sélectionnez une politique de réponse existante dans la liste déroulante.
    - ou -
    choisissez Create policy (Créer une politique) afin de créer une nouvelle politique d'en-têtes de réponse. Dans la nouvelle politique, sous Cross-origin resource sharing (Partage de ressources entre origines multiples), activez CORS.
  5. Renseignez les autres paramètres en fonction de vos besoins, puis choisissez Create policy (Créer la politique).
  6. Sur la page Create Behavior (Créer un comportement), choisissez dans la liste déroulante la politique que vous avez créée.
  7. Choisissez Create Behavior (Créer un comportement). Vous pouvez également choisir Save changes (Enregistrer les modifications) si vous modifiez un comportement existant.

Remarque : CloudFront déploie généralement les modifications apportées aux distributions dans un délai de cinq minutes. Après avoir modifié votre distribution, invalidez le cache afin d'effacer les réponses précédemment mises en cache.