web-dev-qa-db-fra.com

S3 - En-tête contrôle-accès-autorisation-origine

Quelqu'un at-il réussi à ajouter Access-Control-Allow-Origin aux en-têtes de réponse? Ce dont j'ai besoin, c'est quelque chose comme ceci:

<img src="http://360assets.s3.amazonaws.com/tours/8b16734d-336c-48c7-95c4-3a93fa023a57/1_AU_COM_180212_Areitbahn_Hahnkoplift_Bergstation.tiles/l2_f_0101.jpg" />

Cette requête doit contenir dans la réponse, en-tête, Access-Control-Allow-Origin: *

Mes paramètres CORS pour le compartiment se présentent comme suit:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Comme on pouvait s'y attendre, il n'y a pas d'en-tête de réponse Origin.

amazon-web-servicesamazon-s3corshttp-headers
135
Wowzaaa

En général, tout ce que vous avez à faire est d’ajouter «Ajouter une configuration CORS» dans les propriétés de votre compartiment.

Amazon-screen-shot

Le <CORSConfiguration> est livré avec des valeurs par défaut. C'est tout ce dont j'avais besoin pour résoudre votre problème. Cliquez simplement sur "Enregistrer" et réessayez pour voir si cela a fonctionné. Si ce n'est pas le cas, vous pouvez également essayer le code ci-dessous (tiré de alxrb answer) qui semble avoir fonctionné pour la plupart des utilisateurs.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Pour plus d'informations, vous pouvez lire cet article sur Modification de l'autorisation d'un godet .

136
Flavio Wuensche

Je rencontrais un problème similaire lors du chargement des polices Web. Lorsque je cliquais sur "Ajouter une configuration CORS", dans les propriétés du compartiment, ce code existait déjà:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Je viens de cliquer sur Enregistrer et cela a fonctionné, mes polices Web personnalisées se chargeaient dans IE et Firefox. Je ne suis pas un expert en la matière, j'ai juste pensé que cela pourrait vous aider.

93
alxrb

@jordanstephens a dit cela dans un commentaire, mais il s'est en quelque sorte égaré et a été une solution vraiment facile pour moi.

J'ai simplement ajouté la méthode HEAD et cliqué sur Save (Enregistrer) et cela a commencé à fonctionner.

<CORSConfiguration>
	<CORSRule>
		<AllowedOrigin>*</AllowedOrigin>
		<AllowedMethod>GET</AllowedMethod>
		<AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
		<MaxAgeSeconds>3000</MaxAgeSeconds>
		<AllowedHeader>Authorization</AllowedHeader>
	</CORSRule>
</CORSConfiguration>

34
Senica Gonzalez

Si votre demande ne spécifie pas d'en-tête Origin, S3 n'inclura pas les en-têtes CORS dans la réponse. Cela m’a vraiment jeté à terre parce que j’essayais toujours de boucler les fichiers pour tester la CORS, mais cela n’inclut pas Origin.

27
eremzeit

C'est un moyen simple de faire ce travail.

Je sais que c'est une vieille question, mais qu'il est toujours difficile de trouver une solution. 

Pour commencer, cela a fonctionné pour moi sur un projet construit avec Rails 4, Paperclip 4, CamanJS, Heroku et AWS S3.

Vous devez demander votre image en utilisant le paramètre crossorigin: "anonymous".

    <img href="your-remote-image.jpg" crossorigin="anonymous">

Ajoutez l'URL de votre site à CORS dans AWS S3. Ici est une référence d'Amazon à ce sujet. Dans la plupart des cas, accédez à votre compartiment, puis sélectionnez "Propriétés" dans les onglets de droite, ouvrez l’onglet "Autorisations", puis cliquez sur "Modifier la configuration CORS".

À l’origine, < AllowedOrigin> était réglé sur *. Il suffit de remplacer cet astérisque par votre URL et d’inclure des options telles que http:// et https:// sur des lignes séparées. Je m'attendais à ce que l'astérisque accepte "Tous", mais apparemment, nous devons être plus spécifiques que cela. 

C'est comme ça que ça me ressemble. 

 enter image description here

27
Horacio

Voir les réponses ci-dessus. (mais j'avais aussi un bug chromé)

Ne chargez pas et n'affichez pas l'image sur la page en CHROME. (si vous allez créer plus tard une nouvelle instance)

Dans mon cas, j'ai chargé des images et les ai affichées sur la page. Quand ils ont été cliqués, j'ai créé une nouvelle instance d'eux:

// there is already an html <img /> on the page, I'm creating a new one now
img = $('<img crossorigin />')[0]
img.onload = function(){
  context.drawImage(img, 0, 0)
  context.getImageData(0,0,w,h)
}
img.src = 'http://s3.amazonaws.com/my/image.png'; // I added arbitrary ?crossorigin to change the URL of this to fix it

Chrome avait déjà mis en cache une autre version et n'a JAMAIS essayé de récupérer la version crossorigin (même si j'utilisais crossorigin sur les images affichées.

Pour résoudre ce problème, j'ai ajouté ?crossorigin à la fin de l'URL de l'image (mais vous pouvez ajouter ?blah, il est simplement arbitraire de changer le statut du cache) lorsque je l'ai chargé pour canvas.

15
Funkodebat

Je vais juste ajouter à cette réponse - ci-dessus - qui a résolu mon problème.

Pour configurer le point de distribution AWS/CloudFront afin de le rendre à l'en-tête d'origine CORS, cliquez sur l'interface d'édition du point de distribution:

 enter image description here

Accédez à l'onglet Comportements et modifiez le comportement en remplaçant les en-têtes de liste blanche de Aucun en Liste blanche, puis assurez-vous que Origin est ajouté à la zone de liste blanche.

 enter image description here

14
MikeiLL

Je rencontrais des problèmes similaires lors du chargement de modèles 3D à partir de S3 dans une visionneuse 3D javascript (3D HOP), mais assez étrangement uniquement avec certains types de fichiers (.nxs). 

Ce qui a résolu le problème pour moi était de changer AllowedHeader de Authorization par défaut en * dans la configuration CORS: 

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
8
VME

  1. Définissez la configuration CORS dans les paramètres d'autorisations pour votre compartiment S3.

    <?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

  2. S3 ajoute les en-têtes CORS uniquement lorsque la requête http a l'en-tête Origin.

  3. CloudFront n'a pas retransmet l'en-tête Origin par défaut

    Vous devez ajouter à la liste blanche Origin l'en-tête dans les paramètres de comportement de votre distribution CloudFront. 

3
Pawel Furmaniak

Je l'ai corrigé en écrivant ce qui suit:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Pourquoi <AllowedHeader>*</AllowedHeader> fonctionne et <AllowedHeader>Authorization</AllowedHeader> pas?

2
Pablo García Miranda

J'ai essayé toutes les réponses ci-dessus et rien n'a fonctionné. En fait, nous avons besoin de 3 étapes à partir des réponses ci-dessus pour que cela fonctionne:

  1. Comme suggéré par Flavio; ajoutez la configuration CORS sur votre compartiment:

    <CORSConfiguration>
   <CORSRule>
     <AllowedOrigin>*</AllowedOrigin>
     <AllowedMethod>GET</AllowedMethod>
   </CORSRule>
 </CORSConfiguration>

  2. Sur l'image; mentionnez crossorigin:

    <img href="abc.jpg" crossorigin="anonymous">

  3. Utilisez-vous un CDN? Si tout fonctionne correctement, connectez-vous au serveur Origin mais PAS via CDN; cela signifie que vous devez définir certains paramètres sur votre CDN, comme accepter les en-têtes CORS. Le réglage exact dépend du CDN que vous utilisez. 

2
Deepak

fwuensche "answer" permet de créer un CDN; Ce faisant, j'ai supprimé MaxAgeSeconds.

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
1
Mich. Gio.

Je suis arrivé à ce fil, et aucune des solutions ci-dessus n'a été appliquée à mon cas. En fin de compte, j'ai simplement dû supprimer une barre oblique finale du <AllowedOrigin> dans la configuration CORS de mon compartiment.

Échoue:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://www.mywebsite.com/</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Victoires:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://www.mywebsite.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

J'espère que cela épargnera à quelqu'un d'arracher les cheveux.

1
Charney Kaye

Avertissement - Hack.

Si vous utilisez S3Image pour afficher une image et essayez ensuite de l'obtenir via fetch, peut-être pour l'insérer dans un PDF ou effectuer un autre traitement, soyez averti que Chrome mettra en cache le premier résultat qui ne nécessite pas de demande de contrôle en amont CORS, puis essayez d’obtenir la même ressource sans la demande de contrôle en amont OPTIONS pour l’extraction et échouera en raison des restrictions imposées par le navigateur.

Une autre façon de contourner ce problème consiste à vous assurer que S3Image inclut crossorigin: 'use-credentials' comme indiqué ci-dessus. Dans le fichier que vous utilisez S3Image (j'ai un composant qui crée une version mise en cache de S3Image, c'est donc l'endroit idéal pour moi), substituez la méthode prototype de S3Image, imageEl, pour le forcer à inclure cet attribut.

S3Image.prototype.imageEl = function (src, theme) {
    if (!src) {
        return null;
    }
    var selected = this.props.selected;
    var containerStyle = { position: 'relative' };
    return (React.createElement("div", { style: containerStyle, onClick: this.handleClick },
        React.createElement("img", { crossOrigin: 'use-credentials', style: theme.photoImg, src: src, onLoad: this.handleOnLoad, onError: this.handleOnError}),
        React.createElement("div", { style: selected ? theme.overlaySelected : theme.overlay })));
};

Le problème 403 est maintenant résolu. Quelle douleur aggrr!

1
Philip Murphy
<AllowedOrigin>*</AllowedOrigin>

n’est pas une bonne idée car avec * vous accordez à n’importe quel site web l’accès aux fichiers de votre compartiment. Au lieu de cela, vous devez spécifier quelle origine est exactement autorisée à utiliser les ressources de votre compartiment. Habituellement, c'est votre nom de domaine comme

<AllowedOrigin>https://www.example.com</AllowedOrigin>

ou si vous souhaitez inclure tous les sous-domaines possibles:

<AllowedOrigin>*.example.com</AllowedOrigin>
0
Rudolf B

Comme d'autres ont des états, vous devez d'abord avoir la configuration CORS dans votre compartiment S3:

<CORSConfiguration>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Mais dans mon cas, après cela, cela ne fonctionnait toujours pas. J'utilisais Chrome (probablement le même problème avec d'autres navigateurs).

Le problème était que Chrome mettait en cache l'image avec les en-têtes (ne contenant pas les données CORS), donc, peu importe ce que j'ai essayé de modifier dans AWS, je ne verrais pas mes en-têtes CORS.

Après effacement du cache Chrome et rechargement de la page, l'image contenait les en-têtes CORS attendus.

0
Tonio

Dans la dernière console de gestion S3, lorsque vous cliquez sur la configuration CORS dans l'onglet Autorisations, un exemple de configuration CORS par défaut s'affiche. Cette configuration est pas réellement active, cependant! Vous devez d'abord cliquer sur Enregistrer pour activer CORS.

J'ai mis beaucoup de temps à comprendre cela, espérons-le, cela permettra à quelqu'un de gagner du temps.

0
hackel

La réponse acceptée fonctionne, mais il semble que si vous accédez directement à la ressource, il n'y a pas d'en-tête d'origine croisée. Si vous utilisez cloudfront, cela entraînera cloudfront à mettre en cache la version sans en-têtes. Si vous accédez ensuite à une autre URL chargée de cette ressource, vous obtiendrez ce problème d'origine croisée.

0
TigerBear

Ci-dessous se trouve la configuration et ça va marcher pour moi. J'espère que cela vous aidera à résoudre votre problème sur AWS S3.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
0
Gaurang Sondagar

Cette configuration a résolu le problème pour moi:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
0
DIWAKAR