Comment configurer CORS dans Amazon S3 et confirmer les règles CORS avec cURL ?

Résolution

Remarque : Si des erreurs surviennent lorsque vous exécutez des commandes de l'interface de la ligne de commande AWS (AWS CLI), consultez la section Résoudre des erreurs liées à l’AWS CLI. Vérifiez également que vous utilisez bien la version la plus récente de l'AWS CLI.

Vous pouvez appliquer les règles CORS (Cross-Origin Resource Sharing) à votre compartiment à l'aide de la console Amazon S3 ou de l'interface de ligne de commande AWS (AWS CLI).CORS est une fonctionnalité du protocole HTTP qui utilise des en-têtes pour permettre aux navigateurs d'afficher le contenu qu’un serveur Web demande à partir d'une autre origine. Si vous envoyez une demande cross-origin à un compartiment Amazon S3 que vous n'avez pas configuré avec une règle CORS, le serveur Web ne renvoie pas l'en-tête CORS. Pour tester les règles CORS sur votre compartiment Amazon S3, utilisez la commande cURL suivante :

curl -i http://mycorsbucket.s3.amazonaws.com/cors-test.html -H "Origin: http://www.example.com"

HTTP/1.1 200 OK
x-amz-id-2: Va106gWx1uUDGbouopXfpjvjHW0VXydI8/VGlraf/62f2vvxtI+iAnmu7lF4MK2B6CxuzReyfRI=
x-amz-request-id: QWNNX1Y0MWFM152H
Date: Thu, 04 Nov 2021 18:52:55 GMT
Last-Modified: Thu, 04 Nov 2021 16:03:50 GMT
ETag: "cd4276d2cd5a2dc8ebcc1e04746680f6"
Accept-Ranges: bytes
Content-Type: text/html
Server: AmazonS3
Content-Length: 55

Remarque : Remplacez mycorsbucket par le nom de votre compartiment et remplacez www.example.com par l'URL du serveur Web à partir duquel vous demandez du contenu.

Si un serveur Web envoie une demande similaire au site Web d’origine, le contenu extrait de votre compartiment n'apparaîtra pas dans le navigateur. Pour autoriser l'affichage de votre contenu, configurez une politique CORS sur votre compartiment Amazon S3. Configurez votre politique CORS de manière que les en-têtes appropriés soient renvoyés. Vous pouvez configurer une règle CORS sur votre compartiment avec la console Amazon S3 ou l'interface de ligne de commande AWS.

Configurer une règle CORS avec la console Amazon S3

Pour configurer une règle CORS sur votre compartiment avec la console Amazon S3, effectuez les étapes suivantes :

1. Ouvrez la console Amazon S3.

2. Sélectionnez votre compartiment.

3. Choisissez l’onglet Autorisations.

4. Dans le volet Partage de ressources entre origines, choisissez Modifier.

5. Dans la zone de texte, entrez la règle JSON CORS que vous souhaitez activer, comme dans l'exemple suivant :

   [
     {
       "AllowedHeaders": [
         "Authorization"
       ],
       "AllowedMethods": [
         "GET",
         "HEAD"
       ],
       "AllowedOrigins": [
         "http://www.example.com"
       ],
       "ExposeHeaders": [
         "Access-Control-Allow-Origin"
       ]
     }
   ]

   Pour plus d'informations sur chacun des éléments des règles CORS ou des exemples de règles, consultez la section Éléments d’une configuration CORS.

   Remarque : Remplacez www.example.com par l'URL du serveur Web à partir duquel vous demandez du contenu.

6. Sélectionnez Enregistrer.

Configurer une règle CORS avec l'interface de ligne de commande AWS

Pour configurer une règle CORS sur votre compartiment avec l'interface de ligne de commande AWS, exécutez la commande suivante :

aws s3api put-bucket-cors --bucket mycorsbucket --cors-configuration '{"CORSRules" : [{"AllowedHeaders":["Authorization"],"AllowedMethods":["GET","HEAD"],"AllowedOrigins":["http://www.example.com"],"ExposeHeaders":["Access-Control-Allow-Origin"]}]}'

Remarque : Remplacez mycorsbucket par le nom de votre compartiment et remplacez www.example.com par l'URL du serveur Web à partir duquel vous demandez du contenu.

Tester la règle CORS

Pour tester la règle CORS, utilisez la commande cURL, comme suit :

curl -i http://mycorsbucket.s3.amazonaws.com/index.html -H "Origin: http://www.example.com"

HTTP/1.1 200 OK
x-amz-id-2: d5Jsw1vCf8tR3cMdXrtcTKYgczU/1pjxahnrw7C6jU1fLo8py2Nv2kpeFs8pYPruVZg6Y3JuRUA=
x-amz-request-id: BMCCY18E58B3GBWV
Date: Thu, 04 Nov 2021 19:12:26 GMT
Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Methods: GET, HEAD
Access-Control-Expose-Headers: Access-Control-Allow-Origin
Access-Control-Allow-Credentials: true
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Last-Modified: Thu, 04 Nov 2021 16:03:50 GMT
ETag: "cd4276d2cd5a2dc8ebcc1e04746680f6"
Accept-Ranges: bytes
Content-Type: text/html
Server: AmazonS3
Content-Length: 55

Remarque : Remplacez mycorsbucket par le nom de votre compartiment et remplacez www.example.com par l'URL du serveur Web à partir duquel vous demandez du contenu.

Si vous avez correctement configuré la règle CORS, vous recevez une réponse 200 OK.

Résoudre les problèmes liés aux méthodes CORS

Si vous rencontrez un comportement inattendu lorsque vous accédez à des compartiments avec CORS, essayez ce qui suit :

1. Utilisez la commande cURL pour effectuer des requêtes en utilisant des méthodes CORS spécifiques en ajoutant l'indicateur -H « Access-Control-Request-Method : <Method>». Cet indicateur indique la méthode CORS à tester. Utilisez l'indicateur --request OPTIONS pour effectuer une vérification de la demande avant le contrôle.

   Remarque : Amazon S3 prend en charge les méthodes GET, HEAD, PUT, POST et DELETE.

   curl -i http://mycorsbucket.s3.amazonaws.com/cors-test.html -H "Access-Control-Request-Method: POST" --request OPTIONS -H "Origin: http://www.example.com"
   HTTP/1.1 403 Forbidden
   x-amz-request-id: 190J4Q6222HA2KZ5
   x-amz-id-2: 6oEci3qg88OeoLvBGwkN8K9AGdxyVela8ZKxftXMqyWrtZFfiKMrBwpTAeRiOth8amovJMtAAdA=
   Content-Type: application/xml
   Transfer-Encoding: chunked
   Date: Fri, 19 Nov 2021 18:43:38 GMT
   Server: AmazonS3
   
   <?xml version="1.0" encoding="UTF-8"?>
   <Error><Code>AccessForbidden</Code><Message>CORSResponse: This CORS request is not allowed. This is usually because the evalution of Origin, request method / Access-Control-Request-Method or Access-Control-Request-Headers are not whitelisted by the resource's CORS spec.</Message><Method>POST</Method><ResourceType>OBJECT</ResourceType><RequestId>190J4Q6222HA2KZ5</RequestId><HostId>6oEci3qg88OeoLvBGwkN8K9AGdxyVela8ZKxftXMqyWrtZFfiKMrBwpTAeRiOth8amovJMtAAdA=</HostId></Error>

   Remarque : Remplacez mycorsbucket par le nom de votre compartiment et remplacez www.example.com par l'URL du serveur Web à partir duquel vous demandez du contenu.

2. Si la demande renvoie une erreur, vérifiez que la configuration CORS est définie sur le compartiment. Assurez-vous d'avoir ajouté la méthode requise à la règle CORS sur votre compartiment. Si la configuration CORS est définie, l'option permettant de modifier la configuration CORS s'affiche dans la section Autorisations pour le compartiment de la console S3.

   aws s3api put-bucket-cors --bucket mycorsbucket --cors-configuration '{"CORSRules" : [{"AllowedHeaders":["Authorization"],"AllowedMethods":["GET","HEAD","POST"],"AllowedOrigins":["http://www.example.com"],"ExposeHeaders":["Access-Control-Allow-Origin"]}]}'

   Remarque : Remplacez mycorsbucket par le nom de votre compartiment et remplacez www.example.com par l'URL du serveur Web à partir duquel vous demandez du contenu.

3. Testez la règle CORS mise à jour. Si votre méthode fonctionne comme prévu, vous recevez la réponse suivante :

   curl -i http://mycorsbucket.s3.amazonaws.com/index.html -H "Access-Control-Request-Method: POST" -X OPTIONS -H "Origin: http://www.example.com"
   HTTP/1.1 200 OK
   x-amz-id-2: Cx4kuM31KPVE19woEPRRYxF+85vEWkLk8+M0p6BIb72T550njMnmLtjqRgYzuxKelR0f+cxhFqI=
   x-amz-request-id: QBSHV46QK43HGW15
   Date: Fri, 19 Nov 2021 18:48:21 GMT
   Access-Control-Allow-Origin: http://www.example.com
   Access-Control-Allow-Methods: GET, HEAD, POST
   Access-Control-Expose-Headers: Access-Control-Allow-Origin
   Access-Control-Allow-Credentials: true
   Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
   Server: AmazonS3
   Content-Length: 0

   Remarque : Remplacez mycorsbucket par le nom de votre compartiment et remplacez www.example.com par l'URL du serveur Web à partir duquel vous demandez du contenu.

4. Capturez l'intégralité de la demande et de la réponse avec l'outil de votre choix.

Pour chaque demande reçue par Amazon S3, vous devez disposer d'une règle CORS correspondant aux données de votre demande. Vérifiez que votre demande inclut les éléments suivants :

• Vérifiez que la demande possède l'en-tête Origin. Si l'en-tête est manquant, Amazon S3 ne traite pas la demande comme une demande d'origine croisée et n'envoie pas d'en-têtes de réponse CORS dans la réponse.
• Vérifiez que l'en-tête Origin de votre demande correspond à au moins l'un des éléments AllowedOrigins de la règle CORSRule spécifiée. Les valeurs du schéma, de l'hôte et du port figurant dans l'en-tête de la demande Origin doivent correspondre aux éléments AllowedOrigins du CORSRule. Supposons, par exemple, que vous définissiez la règle CORSRule pour autoriser l'origine http://www.example.com. Dans ce cas, les origines https://www.example.com et http://www.example.com:80 de votre requête ne correspondent pas à l'origine autorisée dans votre configuration.
• Vérifiez que la méthode de votre requête ou de votre demande de contrôle préalable, que vous avez spécifiée dans Access-Control-Request-Method), est l'un des éléments AllowedMethods de la même CORSRule.
• Si une demande de contrôle préalable inclut un en-tête Access-Control-Request-Headers, vérifiez que le CORSRule inclut les entrées AllowedHeader pour chaque valeur de l'en-tête Access-Control-Request-Headers.

Informations connexes

Ajouter ou supprimer des en-têtes HTTP dans les réponses CloudFront avec une politique

Comment résoudre l'erreur « No 'Access-Control-Allow-Origin' header is present on the requested resource » provenant de CloudFront ?

Comment Amazon S3 évalue-t-il la configuration CORS d'un compartiment ?

Résolution des problèmes liés à CORS