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


187

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.



1
Une chose qui manque à cela est: <ExposeHeader> Access-Control-Allow-Origin </ExposeHeader>
Dimitry

Réponses:


198

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

capture d'écran amazon

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 .


4
Cela semble possible. Essayez de lire le lien ci-dessus (dans la réponse) ou passez directement à celui-ci: docs.aws.amazon.com/AmazonS3/latest/API/RESTBucketPUTcors.html
Flavio Wuensche

7
Je vous remercie. Le simple fait de cliquer sur Enregistrer a permis à mes polices de se charger.
Tania Rascia

2
Je remarque que cela fonctionne parfois et que d'autres fois, l'erreur de navigateur s'affiche toujours après la modification. Je ne sais pas si son CloudFlare ou le S3.
Mark

4
Vous devrez peut-être ajouter HEADà la AllowedMethods
jordanstephens

32
Ça ne marche pas pour moi. Toujours pas d'en-tête «Access-Control-Allow-Origin» dans la réponse des requêtes HEAD ou GET.
carpiediem

104

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.


12
Merci! Cela l'a fait pour moi. Je suis arrivé jusqu'à cliquer sur «ajouter la configuration CORS», mais je ne savais pas que je devais cliquer sur «enregistrer» car je pensais que je regardais la configuration par défaut. D'oh.
Jack Cushman

35
Je devais me préparer <AllowedHeader>*</AllowedHeader>pour que cela fonctionne (mieux vaut créer une nouvelle règle pour votre site uniquement en faisant cela)
parlement

4
@parliament avait la magie là-bas, car tous les autres paramètres ci-dessus n'ont pas fait l'affaire jusqu'à ce que <AllowedHeader> soit défini sur un joker. Hourra.
Neal Magee

Je suis allé dans les paramètres CORS et j'ai trouvé les mêmes paramètres là-dedans, mais <AllowedOrigin> * </AllowedOrigin> est devenu actif lorsque j'ai appuyé sur la sauvegarde. Ce n'était pas avant.
dvdmn

1
Voilà, cliquez sur Enregistrer
lapinkoira

48

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.


2
Je regardais sur Internet depuis 2 semaines, tous les articles et réponses parlaient de changer les configurations S3 CORS que j'ai fait comme ils l'ont dit mais pas de changement sur la réponse, jusqu'à ce que je voie votre réponse, cela a du sens pour moi, je l'ai testé en utilisant facteur et son fonctionnement! alors merci beaucoup
Abdallah Awwad Alkhwaldah

1
Tout le monde sait comment changer les en-têtes d'une imgbalise? Je ne peux pas envoyer différents en-têtes, le navigateur envoie la demande
idan

1
OMG est-il documenté n'importe où?
Darkowic

2
C'est :) docs.aws.amazon.com/AmazonS3/latest/dev/… > Vérifiez que la demande a l'en-tête Origin.Si l'en-tête est manquant, Amazon S3 ne traite pas la demande comme une demande cross-origin, et n'envoie pas d'en-têtes de réponse CORS dans la réponse.
Darkowic

46

@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>


3
cela fonctionne à partir du 17 janvier 2018, la réponse acceptée est une honte. lol
lasec0203

4
Oui. Cela corrige l'erreur "No 'Access-Control-Allow-Origin' header" dans Chrome lors de la GET-ing des choses comme des polices à partir d'AWS S3.
Nostalg.io

1
Oui! Merci beaucoup. Permettre la HEADméthode a fait l'affaire.
Zac

37

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.

entrez la description de l'image ici


1
contrairement à la réponse acceptée, cela fonctionne réellement! Même ClaudFront CDN chargeant ce S3 reproduit ces en-têtes. Merci mec m'a sauvé quelques heures!
équivalent8

5
Si vous utilisez CloudFront, vous pouvez également consulter ceci - blog.celingest.com/en/2014/10/02/…
Kunal

1
Merci au lien de @ Kunal. CloudFront ajoute une couche de complexité à cette équation.
Tyler Collier

1
J'étais allé aussi loin que la documentation MDN <img>, mais je n'ai mis que crossOrigin="true"par erreur. MERCI!
Cezille07

Wow, cela a vraiment fait l'affaire pour moi! Je peux l'utiliser sur localhost et je peux même utiliser l'astérisque, la clé était simplement d'ajouter crossorigin = "anonymous" à mon élément html: D
Alexander

23

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


5
La mise en cache s'est avérée être mon problème aussi (après avoir essayé les réponses acceptées). Merci pour cela.
FearMediocrity

A également eu le problème de cache sur Chrome. Solution facile: Outils / Paramètres> Effacer les données de navigation ...> Images et fichiers mis en cache Bien qu'une autre solution puisse être requise pour les utilisateurs susceptibles de rencontrer ce problème.
StevieP

1
Merci pour cette réponse! J'ai eu le même problème avec Chrome et je n'ai pas trouvé de réponse.
Wandrille

1
Tout le monde doit essayer ceci s'il a des problèmes avec CORS !! Sauve ma journée!
Sangar82

23

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:

entrez la description de l'image ici

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.

entrez la description de l'image ici


Quelles méthodes HTTP autorisées devez-vous définir?
Apprenti

Vous voulez dire comme GET, POST, DELETE, etc ...? Où sont-ils demandés?
MikeiLL

Pouvez-vous reformuler votre question s'il vous plaît afin que je puisse comprendre si vous faites référence au formulaire web cf, ou à l'application qui est demandée la ressource s3? Dans le premier cas, il existe une option de méthodes HTTP qui est mentionnée dans la documentation ici docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/…
Learner

On dirait que vous demandiez ce qui HTTP Request Methodsdoit être défini dans AWS. Et à cette question, je ne vois pas que l'on doive être placé nulle part. Si vous parlez au sein de l'application demandant la ressource, je crois que vous demanderiez simplement le fichier par son url string: c'est-à-dire une image, une vidéo, un fichier audio.
MikeiLL

C'était la pièce manquante! Merci! J'ai essayé toutes les réponses ci-dessus et ce n'est qu'après avoir ajouté ces en-têtes à la liste blanche que cela a fonctionné pour moi sur localhost
Omer Leshem

11

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>

3
Nécessaire de définir <AllowedHeader>*</AllowedHeader>comme ça avec un astérisque pour Chrome en octobre 2017. Merci beaucoup! (N'oubliez pas non plus de vider le cache du navigateur après le réglage).
Nostalg.io

Petit point - je ne pense pas que vous deviez changer le fichier AllowedHeader. J'avais également le même problème ici, mais il s'avère que c'était le navigateur qui mettait en cache la réponse précédente ( MaxAgeSeconds). Dans les paramètres DevTools, vous pouvez ignorer le cache lorsque la console est ouverte. Une fois que cela a été fait, cela a commencé à fonctionner pour moi
divillysausages

AllowedHeader> * <a définitivement résolu ce problème pour moi. Cela ne peut s'appliquer que lorsque la demande est envoyée via une bibliothèque xhr particulière? J'utilise Axios et je l'ai trouvé nécessaire.
Jeremy

6

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


1
Je vous remercie! Ce problème de mise en cache me rendait fou. Pour tous ceux qui se demandent comment vider facilement le cache sur Chrome (version 73), cliquez avec le bouton droit sur le bouton de rechargement et choisissez `` Vider le cache et recharger dur ''. Ensuite, vous verrez l'effet de toutes les modifications que vous avez apportées à votre S3 CORS en moins de 5 secondes. (Peut-être plus rapide - c'est juste le temps qu'il me faut pour changer d'onglet de navigateur.)
jeudi

1
C'était mon problème. Mon seau avait la configuration CORS appropriée, mon navigateur était tout simplement merveilleusement efficace 🤪Merci.
Daniel Brady

5

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.


Merci que la partie CDN est très importante, pourriez-vous ajouter des détails sur ce qui est nécessaire au niveau CDN?
svelandiag

5

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.


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


2

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?


1

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>

1

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.


1

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>

Je vois très peu de différence entre cette configuration et les configurations de nombreuses autres réponses à cette question. Avez-vous tenté d'utiliser les anciennes configurations des réponses avant de publier cette configuration?
entpnerd

1

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!


1
<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>

1

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>

Cela a fonctionné pour moi au début, puis j'ai renforcé la sécurité en supprimant les méthodes qui n'étaient pas nécessaires et en les spécifiant uniquement aux en-têtes que je voulais
frappé

1

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", "*");

0

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.


0

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.


-1

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.