Comment corriger l’erreur « No "Access-Control-Allow-Origin" header is present on the requested resource » provenant de CloudFront ?

Résolution

Vérifiez que la politique de partage des ressources entre origines (CORS) de l’origine l’autorise à renvoyer l’en-tête Access-Control-Allow-Origin

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

Exécutez la commande suivante pour 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 de ce type :

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 CORS. Configurez une politique CORS sur votre origine personnalisée ou sur votre origine Amazon Simple Storage Service (Amazon S3).

Configurez la distribution CloudFront pour transmettre les en-têtes appropriés au serveur d’origine

Une fois la politique CORS définie sur votre serveur d’origine, configurez votre distribution CloudFront pour transmettre les en-têtes d’origine au serveur d’origine. Si votre serveur d’origine est un compartiment Amazon S3, configurez votre distribution pour transmettre les en-têtes suivants à Amazon S3 :

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

Pour transférer 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 Comportements.
3. Choisissez Créer un comportement. Vous pouvez également sélectionner un comportement existant, puis choisir Modifier.
4. Sous Clé de cache et demandes à l’origine, choisissez Politique de cache et politique de demande à l’origine. Ensuite, pour la politique de demande à l’origine, choisissez CORS-S3Origin ou CORS-CustomOrigin dans la liste déroulante. Pour en savoir plus, consultez la page Utilisation des politiques de demande à l’origine gérées.
   Remarque : si vous préférez créer votre propre politique de cache, consultez la page Création de politiques de cache.
5. Choisissez Créer un comportement. Ou choisissez 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 Paramètres de clé de cache, pour En-têtes, sélectionnez Inclure les en-têtes suivants. Dans la liste déroulante 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 la politique sera attachée.
4. Attachez la politique de cache au comportement de votre distribution CloudFront.

Pour transférer les en-têtes à l’aide des anciens paramètres de cache :

1. Ouvrez votre distribution depuis la console CloudFront.
2. Choisissez l’onglet Comportements.
3. Choisissez Créer un comportement. Vous pouvez également sélectionner un comportement existant, puis choisir Modifier.
4. Sous Clé de cache et demandes à l’origine, sélectionnez Paramètres de cache hérités.
5. Dans la liste déroulante En-têtes, choisissez les en-têtes requis par votre origine. Choisissez Ajouter un en-tête personnalisé pour ajouter les en-têtes requis par votre origine qui n’apparaissent pas dans la liste déroulante.
6. Choisissez Créer un comportement. Ou choisissez Enregistrer les modifications si vous modifiez un comportement existant.

Remarque : veillez également à transmettre l’en-tête dans le cadre de la demande de votre client à CloudFront, qui le retransmet à l’origine.

Configurez le comportement du cache de la distribution CloudFront pour autoriser la méthode OPTIONS pour les demandes HTTP

Si des erreurs persistent après la mise à jour de votre politique CORS et le transfert des en-têtes appropriés, autorisez la méthode OPTIONS HTTP 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 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 Comportements.
3. Choisissez Créer un comportement. Vous pouvez également sélectionner un comportement existant, puis choisir Modifier.
4. Dans le champ Méthodes HTTP autorisées, sélectionnez GET, HEAD, OPTIONS.
5. Choisissez Créer un comportement. Ou choisissez Enregistrer les modifications si vous modifiez un comportement existant.

Configurez votre politique de réponse CloudFront pour 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 pour renvoyer les en-têtes CORS requis. Pour le configurer, créez des politiques d’en-têtes de réponse :

1. Ouvrez votre distribution depuis la console CloudFront.
2. Choisissez l’onglet Comportements.
3. Choisissez Créer un comportement. Vous pouvez également sélectionner un comportement existant, puis choisir Modifier.
4. Dans le champ Politique d’en-têtes de réponse :
   Sélectionnez une politique de réponse existante dans la liste déroulante.
   -ou-
   Choisissez Créer une politique pour créer une nouvelle politique d’en-têtes de réponse. Dans la nouvelle politique, sous Partage de ressources entre origines, activez l’option CORS.
5. Renseignez les autres paramètres selon vos besoins et choisissez Créer une politique.
6. Sur la page Créer un comportement, choisissez la politique que vous avez créée dans la liste déroulante.
7. Choisissez Créer un comportement. Ou choisissez Enregistrer les modifications si vous modifiez un comportement existant.

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

Informations connexes

Configuration de CloudFront pour respecter les paramètres CORS

Configuration du partage de ressources entre origines (CORS)

Utilisation des politiques d’en-têtes de réponse gérées

Ajout d’un en-tête de partage de ressources entre origines (CORS) à la réponse