S3 - En-tête Access-Control-Allow-Origin

Quelqu'un a-t-il réussi à ajouter Access-Control-Allow-Originaux en-têtes de réponse? Ce dont j'ai besoin est quelque chose comme ça:

<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 demande d'obtention doit contenir dans la réponse, l'en-tête, Access-Control-Allow-Origin: *

Mes paramètres CORS pour le seau ressemblent à ceci:

<?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 vous vous en doutez, il n'y a pas d'en- Origintête de réponse.

Habituellement, tout ce que vous avez à faire est "Ajouter une configuration CORS" dans les propriétés de votre compartiment.

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 (de la réponse d'alxrb) qui semble avoir fonctionné pour la plupart des gens.

<?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 la modification des autorisations de compartiment .

J'avais un problème similaire avec le chargement des polices Web, lorsque j'ai cliqué sur `` ajouter la configuration CORS '', dans les propriétés du seau, ce code était déjà là:

<?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é un régal, 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.

Si votre demande ne spécifie pas d'en- Origintête, S3 n'inclura pas les en-têtes CORS dans la réponse. Cela m'a vraiment dérangé parce que j'ai continué à essayer de curl les fichiers pour tester le CORS mais curl ne comprend pas Origin.

@jordanstephens a dit cela dans un commentaire, mais cela se perd en quelque sorte et était une solution très facile pour moi.

J'ai simplement ajouté la méthode HEAD et cliqué sur enregistré 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>

C'est une manière simple de faire fonctionner cela.

Je sais que c'est une vieille question, mais il est encore 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 crossorigin: "anonymous"paramètre.

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

Ajoutez l'URL de votre site à CORS dans AWS S3. Voici une référence d'Amazon à ce sujet. À peu près, allez simplement dans votre seau, puis sélectionnez " Propriétés " dans les onglets de droite, ouvrez "l' onglet Autorisations , puis cliquez sur" Modifier la configuration CORS ".

À l'origine, je m'étais < AllowedOrigin>mis à *. Remplacez simplement cet astérisque par votre URL, assurez-vous d'inclure des options telles que http://et https://dans des lignes séparées. Je m'attendais à ce que l'astérisque accepte "Tous", mais apparemment, nous devons être plus précis que cela.

Voilà comment ça me regarde.

Voir les réponses ci-dessus. (mais j'ai aussi eu un bug de chrome)

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

Dans mon cas, j'ai chargé des images et les ai affichées sur la page. Lorsqu'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 crossoriginversion (même si j'utilisais crossoriginsur les images affichées.

Pour corriger, j'ai ajouté ?crossoriginà la fin de l'url de l'image (mais vous pouvez ajouter ?blah, c'est juste arbitraire de changer l'état du cache) lorsque je l'ai chargé pour le canevas .. Faites-moi savoir si vous trouvez un meilleur correctif pour CHROME

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

Pour configurer AWS / CloudFront Distribution Point pour qu'il redirige l'en-tête CORS Origin, cliquez dans l'interface d'édition du point de distribution:

Accédez à l'onglet des comportements et modifiez le comportement, en changeant "Cache basé sur les en-têtes de demande sélectionnés" de Aucun à Liste blanche, puis assurez-vous qu'il Originest ajouté à la liste blanche. Consultez Configuration de CloudFront pour respecter les paramètres CORS dans la documentation AWS pour en savoir plus.

J'avais des problèmes similaires lors du chargement de modèles 3D 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 passer AllowedHeaderde la valeur par défaut Authorizationà *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>

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 avoir fait 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'essayais de changer dans AWS, je ne verrais pas mes en-têtes CORS.

Après avoir effacé le cache Chrome et rechargé la page , l'image avait les en-têtes CORS attendus

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

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

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

2. Sur l'image; mentionner crossorigin:

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

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

Je suis arrivé à ce fil, et aucune des solutions ci-dessus ne s'est avérée s'appliquer à mon cas. Il s'avère que j'ai simplement dû supprimer une barre oblique de fin de l' <AllowedOrigin>URL 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 évitera à quelqu'un de se tirer les cheveux.

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 des en-têtes CORS uniquement lorsque la requête http a l'en- Origintête.

3. CloudFront ne transfère pas l' en- Origintête par défaut

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

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 ça <AllowedHeader>*</AllowedHeader>marche et <AllowedHeader>Authorization</AllowedHeader>non?

fwuensche "réponse" est correct pour mettre en place un CDN; ce faisant, j'ai supprimé MaxAgeSeconds.

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>

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

Il m'a fallu beaucoup trop de temps pour comprendre cela, j'espère que cela permettra à quelqu'un de gagner du temps.

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>

Avertissement - Hack.

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

Une autre façon de contourner ce problème est de s'assurer que la S3Image inclut crossorigin: 'use-credentials' comme mentionné ci-dessus. Dans le fichier que vous utilisez S3Image, (j'ai un composant qui crée une version mise en cache de S3Image, donc c'est l'endroit idéal pour moi), remplacez la méthode prototype imageEl de S3Image pour la 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!

<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 bucket. 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>

Vous trouverez ci-dessous la configuration et c'est bien de travailler pour moi. J'espère que cela 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>

Tout d'abord, activez CORS dans votre compartiment S3. Utilisez ce code comme guide:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://www.example1.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>http://www.example2.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

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

2) Si cela ne fonctionne toujours pas, assurez-vous d'ajouter également un "crossorigin" avec une valeur "*" à vos balises img. Mettez ceci dans votre fichier html:

  let imagenes = document.getElementsByTagName("img");
    for (let i = 0; i < imagenes.length; i++) {
      imagenes[i].setAttribute("crossorigin", "*");

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êtes d'origine croisée. Si vous utilisez cloudfront, cloudfront mettra en cache la version sans en-têtes.Lorsque vous accédez à une URL différente qui charge cette ressource, vous rencontrez ce problème d'origine croisée.

Si vos paramètres CORS ne vous aident pas.

Vérifiez que la configuration S3 est correcte. J'avais un nom de compartiment incorrect dans Storage.configure. J'ai utilisé un nom court de bucket et cela a provoqué une erreur:

Aucun en-tête «Access-Control-Allow-Origin» n'est présent sur la ressource demandée.

Pour ce que ça vaut, j'ai eu un problème similaire - en essayant d'ajouter une origine autorisée spécifique (non *).

Il s'avère que j'ai dû corriger

<AllowedOrigin>http://mydomain:3000/</AllowedOrigin>

à

<AllowedOrigin>http://mydomain:3000</AllowedOrigin>

(notez le dernier slah dans l'URL)

J'espère que cela aide quelqu'un