S3 - Header für Zugriffssteuerung-Zulassen-Ursprung

187

Hat es jemand geschafft, die Antwortheader zu ergänzen Access-Control-Allow-Origin? Was ich brauche ist so etwas:

<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" />

Diese Get-Anfrage sollte in der Antwort Folgendes enthalten: Access-Control-Allow-Origin: *

Meine CORS-Einstellungen für den Bucket sehen folgendermaßen aus:

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

Wie zu erwarten ist, gibt es keinen OriginAntwortheader.

Wowzaaa
quelle
4
Mögliches Duplikat von stackoverflow.com/questions/17570100/…
Kevin Borders
1
Eine Sache, die hier fehlt, ist: <ExposeHeader> Access-Control-Allow-Origin </ ExposeHeader>
Dimitry

Antworten:

197

Normalerweise müssen Sie in Ihren Bucket-Eigenschaften lediglich "CORS-Konfiguration hinzufügen".

Amazon-Screenshot

Das <CORSConfiguration>kommt mit einigen Standardwerten. Das ist alles was ich brauchte um dein Problem zu lösen. Klicken Sie einfach auf "Speichern" und versuchen Sie erneut, um festzustellen, ob es funktioniert hat. Wenn dies nicht der Fall ist, können Sie auch den folgenden Code (aus der Antwort von alxrb) ausprobieren, der für die meisten Leute funktioniert zu haben scheint.

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

Weitere Informationen finden Sie in diesem Artikel zum Bearbeiten der Bucket-Berechtigung .

Flavio Wuensche
quelle
4
Es scheint möglich zu sein. Versuchen Sie, den obigen Link (in der Antwort) zu lesen, oder fahren Sie mit diesem fort: docs.aws.amazon.com/AmazonS3/latest/API/RESTBucketPUTcors.html
Flavio Wuensche
7
Danke dir. Durch einfaches Klicken auf Speichern konnten meine Schriftarten geladen werden.
Tania Rascia
2
Ich stelle fest, dass es manchmal funktioniert und manchmal erhalte ich den Browserfehler immer noch, nachdem ich dies bearbeitet habe. Ich bin mir nicht sicher, ob es sich um CloudFlare oder S3 handelt.
Mark
4
Möglicherweise müssen Sie HEADzu den AllowedMethods
jordanstephens
31
Funktioniert bei mir nicht Immer noch kein 'Access-Control-Allow-Origin'-Header in der Antwort auf HEAD- oder GET-Anfragen.
Carpiediem
104

Ich hatte ein ähnliches Problem beim Laden von Web-Schriftarten. Als ich in den Bucket-Eigenschaften auf "CORS-Konfiguration hinzufügen" klickte, war dieser Code bereits vorhanden:

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

Ich habe nur auf Speichern geklickt und es hat sehr gut funktioniert. Meine benutzerdefinierten Web-Schriftarten wurden in IE & Firefox geladen. Ich bin kein Experte in diesem Bereich, ich dachte nur, das könnte dir helfen.

alxrb
quelle
12
Vielen Dank! Das hat es für mich getan. Ich habe bis zum Klicken auf "CORS-Konfiguration hinzufügen" geklickt, aber nicht bemerkt, dass ich auf "Speichern" klicken musste, weil ich dachte, ich würde mir die Standardkonfiguration ansehen. D'oh.
Jack Cushman
35
Ich musste festlegen, <AllowedHeader>*</AllowedHeader>dass es funktioniert (besser, wenn Sie dies tun, um eine neue Regel für Ihre Site
Parlament
4
@parliament hatte dort die Magie, da alle anderen oben genannten Einstellungen den Trick nicht machten, bis der <AllowedHeader> auf einen Platzhalter gesetzt wurde. Hurra.
Neal Magee
Ich ging zu den CORS-Einstellungen und fand dort die gleichen Einstellungen, aber <AllowedOrigin> * </ AllowedOrigin> wurde aktiv, als ich auf Speichern drückte. Es war nicht vorher.
DVD
1
Das war es, klicken Sie auf Speichern
lapinkoira
48

Wenn Ihre Anfrage keinen OriginHeader angibt , nimmt S3 die CORS-Header nicht in die Antwort auf. Das hat mich wirklich umgehauen, weil ich immer wieder versucht habe, die Dateien zu kräuseln, um das CORS zu testen, aber das Locken ist nicht enthalten Origin.

eremzeit
quelle
2
Ich habe seit 2 Wochen über das Internet gesucht. In allen Artikeln und Antworten ging es darum, die S3 CORS-Konfigurationen zu ändern, die ich wie gesagt vorgenommen habe, aber keine Änderungen an der Antwort, bis ich sah, dass Ihre Antwort für mich sinnvoll ist. Ich habe sie mit getestet Postbote und seine Arbeit!
Also
1
Weiß jemand, wie ich Header eines imgTags ändern kann ? Ich kann keine verschiedenen Header senden, der Browser sendet die Anfrage
idan
1
OMG ist es irgendwo dokumentiert?
Darkowic
2
Es ist :) docs.aws.amazon.com/AmazonS3/latest/dev/… > Stellen Sie sicher, dass die Anfrage den Origin-Header hat. Wenn der Header fehlt, behandelt Amazon S3 die Anfrage nicht als originenübergreifende Anfrage. und sendet keine CORS-Antwortheader in der Antwort.
Darkowic
46

@ Jordanstephens sagte dies in einem Kommentar, aber es geht irgendwie verloren und war eine wirklich einfache Lösung für mich.

Ich habe einfach die HEAD-Methode hinzugefügt und auf gespeichert geklickt, und es hat funktioniert.

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

Senica Gonzalez
quelle
3
Dies funktioniert ab dem 17. Januar 2018, die akzeptierte Antwort ist eine Schande. lol
lasec0203
4
Ja. Dies behebt den Fehler "Kein" Access-Control-Allow-Origin "-Header" in Chrome, wenn Dinge wie Schriftarten aus AWS S3 abgerufen werden.
Nostalg.io
1
Ja! Ich danke dir sehr. Das Zulassen der HEADMethode hat es geschafft.
Zac
37

Dies ist ein einfacher Weg, um diese Arbeit zu machen.

Ich weiß, dass dies eine alte Frage ist, aber es ist immer noch schwierig, eine Lösung zu finden.

Zu Beginn funktionierte dies für mich bei einem Projekt, das mit Rails 4, Paperclip 4, CamanJS, Heroku und AWS S3 erstellt wurde.


Sie müssen Ihr Bild über den crossorigin: "anonymous"Parameter anfordern .

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

Fügen Sie Ihre Site-URL zu CORS in AWS S3 hinzu. Hier ist ein Hinweis von Amazon dazu. Gehen Sie einfach zu Ihrem Bucket und wählen Sie dann " Eigenschaften " auf den Registerkarten rechts aus, öffnen Sie die Registerkarte " Berechtigungen " und klicken Sie dann auf " CORS-Konfiguration bearbeiten " ".

Ursprünglich hatte ich mich < AllowedOrigin>eingestellt *. Ändern Sie einfach dieses Sternchen in Ihre URL und stellen Sie sicher, dass Sie Optionen wie http://und https://in separaten Zeilen einfügen. Ich hatte erwartet, dass das Sternchen "Alle" akzeptiert, aber anscheinend müssen wir genauer sein.

So sieht es für mich aus.

Geben Sie hier die Bildbeschreibung ein

Horacio
quelle
1
Im Gegensatz zur akzeptierten Antwort funktioniert dies tatsächlich! Sogar ClaudFront CDN, das diesen S3 lädt, repliziert diese Header. Danke Alter, hat mir ein paar Stunden gerettet!
Äquivalent8
5
Wenn Sie CloudFront verwenden, sollten Sie sich auch Folgendes
Kunal
1
Vielen Dank an @ Kunals Link. CloudFront fügt dieser Gleichung eine Komplexitätsebene hinzu.
Tyler Collier
1
Ich war so weit gekommen wie die MDN-Dokumente <img>, aber ich habe es nur crossOrigin="true"aus Versehen gesagt . DANKE!
Cezille07
Wow, das hat tatsächlich den Trick für mich getan! Ich kann es auf localhost verwenden und ich kann sogar das Sternchen verwenden. Der Schlüssel war, einfach crossorigin = "anonym" zu meinem HTML-Element hinzuzufügen: D
Alexander
23

Ich werde nur zu dieser Antwort hinzufügen - oben -, die mein Problem gelöst hat.

Um den AWS / CloudFront-Verteilungspunkt so einzustellen, dass er den CORS-Ursprungsheader weiterleitet, klicken Sie in die Bearbeitungsoberfläche für den Verteilungspunkt:

Geben Sie hier die Bildbeschreibung ein

Gehen Sie zur Registerkarte "Verhalten" und bearbeiten Sie das Verhalten. Ändern Sie "Cache basierend auf ausgewählten Anforderungsheadern" von "Keine" in "Whitelist" und stellen Sie sicher, dass Origines zum Feld "Whitelist" hinzugefügt wird. Weitere Informationen finden Sie unter Konfigurieren von CloudFront unter Berücksichtigung der CORS-Einstellungen in den AWS-Dokumenten.

Geben Sie hier die Bildbeschreibung ein

MikeiLL
quelle
Welche zulässigen HTTP-Methoden müssen Sie festlegen?
Lerner
Du meinst wie GET, POST, DELETE, etc ...? Wo werden diese angefordert?
MikeiLL
Können Sie Ihre Frage bitte umformulieren, damit ich verstehen kann, ob Sie sich auf das cf-Webformular oder auf die Anwendung beziehen, für die die s3-Ressource angefordert wird? In ersterem Fall
Lerner
Anscheinend haben Sie gefragt, was HTTP Request Methodsin AWS eingestellt werden muss. Und zu dieser Frage sehe ich nicht, dass man irgendwo einstellen muss. Wenn Sie in der Anwendung, in der die Ressource angefordert wird, darüber sprechen, würden Sie die Datei meines Erachtens nur nach folgenden Kriterien anfordern url string: dh nach einer Bild-, Video- oder Audiodatei.
MikeiLL
Das war das fehlende Stück! Danke! Ich habe alle Antworten über dieser versucht und erst nachdem ich diese Header auf die Whitelist gesetzt hatte, funktionierte sie für mich auf localhost
Omer Leshem
22

Siehe obige Antworten. (aber ich hatte auch einen Chromfehler)

Laden Sie das Bild nicht auf der Seite in CHROM und zeigen Sie es nicht an. (Wenn Sie später eine neue Instanz erstellen möchten)

In meinem Fall habe ich Bilder geladen und auf der Seite angezeigt. Als sie angeklickt wurden, habe ich eine neue Instanz von ihnen erstellt:

// 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 hatte bereits eine andere Version zwischengespeichert und NIEMALS versucht, die crossoriginVersion erneut abzurufen (selbst wenn ich sie crossoriginfür die angezeigten Bilder verwendet habe.

Um das Problem zu beheben, habe ich ?crossorigines am Ende der Bild-URL hinzugefügt (aber Sie können hinzufügen ?blah, es ist nur willkürlich, den Cache-Status zu ändern), als ich es für die Leinwand geladen habe. Lassen Sie mich wissen, ob Sie eine bessere Lösung für CHROME finden

Funkodebat
quelle
5
Caching erwies sich auch als mein Problem (nachdem ich die akzeptierten Antworten ausprobiert hatte). Danke dafür.
FearMediocrity
Hatte auch das Cache-Problem auf Chrome. Einfache Lösung: Tools / Einstellungen> Browserdaten löschen ...> Zwischengespeicherte Bilder und Dateien Obwohl für Benutzer, die möglicherweise mit diesem Problem konfrontiert sind, möglicherweise eine andere Lösung erforderlich ist.
StevieP
1
Danke für diese Antwort! Ich hatte das gleiche Problem mit Chrome und fand keine Antwort.
Wandrille
1
Alle Leute müssen dies versuchen, wenn sie Probleme mit CORS haben !! Rette meinen Tag!
Sangar82
11

Ich hatte ähnliche Probleme beim Laden von 3D-Modellen aus S3 in einen Javascript 3D-Viewer (3D HOP), aber seltsamerweise nur bei bestimmten Dateitypen (.nxs).

Was es für mich festgelegt ändert AllowedHeadervon der Standardeinstellung Authorizationzu *dem CORS config:

<?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>
veuncent
quelle
3
Musste <AllowedHeader>*</AllowedHeader>genau so mit einem Stern für Chrome im Oktober 2017 einstellen . Vielen Dank! (Vergessen Sie auch nicht, den Browser-Cache nach dem Einstellen zu löschen.)
Nostalg.io
Kleiner Punkt - ich glaube nicht, dass Sie das ändern müssen AllowedHeader. Ich hatte auch hier das gleiche Problem, aber es stellte sich heraus, dass der Browser die vorherige Antwort zwischengespeichert hatte ( MaxAgeSeconds). In den DevTools-Einstellungen können Sie den Cache ignorieren, während die Konsole geöffnet ist. Sobald dies erledigt war, fing es an, für mich zu arbeiten
Zivilwürste
AllowedHeader> * <hat dieses Problem definitiv für mich behoben. Es kann nur gelten, wenn die Anfrage über eine bestimmte xhr-Bibliothek gesendet wird? Ich benutze Axios und fand es notwendig.
Jeremy
6

Wie bei anderen Status müssen Sie zuerst die CORS-Konfiguration in Ihrem S3-Bucket haben:

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

Aber in meinem Fall funktionierte es danach immer noch nicht. Ich habe Chrome verwendet (wahrscheinlich das gleiche Problem mit anderen Browsern).

Das Problem war, dass Chrome das Bild mit den Headern zwischenspeichert (ohne die CORS-Daten). Unabhängig davon , was ich in AWS ändern wollte, wurden meine CORS-Header nicht angezeigt.

Nach dem Löschen des Chrome-Cache und dem erneuten Laden der Seite hatte das Bild die erwarteten CORS-Header

Tonio
quelle
1
Danke dir! Dieses Caching-Problem hat mich wahnsinnig gemacht. Wenn Sie sich fragen, wie Sie den Cache in Chrome (Version 73) einfach löschen können, klicken Sie mit der rechten Maustaste auf die Schaltfläche zum erneuten Laden und wählen Sie "Cache leeren und hart neu laden". Anschließend sehen Sie die Auswirkungen aller Änderungen, die Sie an Ihrem S3 CORS vorgenommen haben, innerhalb von <5 Sekunden. (Vielleicht schneller - so lange
brauche
1
Das war mein Problem. Mein Bucket hatte die entsprechende CORS-Konfiguration, mein Browser war einfach wunderbar effizient. Danke.
Daniel Brady
5

Ich bin zu diesem Thread gekommen, und keine der oben genannten Lösungen hat sich für meinen Fall bewährt. Es stellte sich heraus, dass ich<AllowedOrigin> in der CORS-Konfiguration meines Buckets lediglich einen abschließenden Schrägstrich aus der URL entfernen musste .

Schlägt fehl:

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

Gewinnt:

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

Ich hoffe, das erspart jemandem das Haarziehen.

Charney Kaye
quelle
4

Ich habe alle Antworten oben ausprobiert und nichts hat funktioniert. Eigentlich brauchen wir 3 Schritte von den obigen Antworten zusammen, damit es funktioniert:

  1. Wie von Flavio vorgeschlagen; Fügen Sie Ihrem Bucket die CORS-Konfiguration hinzu:

    <CORSConfiguration>
       <CORSRule>
         <AllowedOrigin>*</AllowedOrigin>
         <AllowedMethod>GET</AllowedMethod>
       </CORSRule>
     </CORSConfiguration>
    
  2. Auf dem Bild; Crossorigin erwähnen:

    <img href="abc.jpg" crossorigin="anonymous">
    
  3. Verwenden Sie ein CDN? Wenn alles gut funktioniert, wird eine Verbindung zum Ursprungsserver hergestellt, jedoch NICHT über CDN. Dies bedeutet, dass Sie auf Ihrem CDN einige Einstellungen wie das Akzeptieren von CORS-Headern benötigen. Die genaue Einstellung hängt davon ab, welches CDN Sie verwenden.

Deepak Singhal
quelle
Da der CDN-Teil sehr wichtig ist, können Sie Details dazu hinzufügen, was auf CDN-Ebene benötigt wird?
Svelandiag
3
  1. Legen Sie die CORS-Konfiguration in den Berechtigungseinstellungen für Ihren S3-Bucket fest

    <?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 fügt CORS-Header nur hinzu, wenn die HTTP-Anforderung den OriginHeader enthält.

  3. CloudFront leitet nicht weiterOrigin Header standardmäßig

    Sie müssen den OriginHeader in den Verhaltenseinstellungen für Ihre CloudFront-Distribution auf die Whitelist setzen .

Pawel Furmaniak
quelle
2

Ich habe Folgendes behoben:

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

Warum <AllowedHeader>*</AllowedHeader>arbeitet und <AllowedHeader>Authorization</AllowedHeader>nicht?

Pablo García Miranda
quelle
1

fwuensche "Antwort" ist korret, um ein CDN einzurichten; Dabei habe ich MaxAgeSeconds entfernt.

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

Wenn Sie in der neuesten S3-Verwaltungskonsole auf der Registerkarte Berechtigungen auf die CORS-Konfiguration klicken, wird eine Standard-CORS-Beispielkonfiguration angezeigt. Diese Konfiguration ist nicht aktiv! Sie müssen zuerst auf Speichern klicken, um CORS zu aktivieren.

Ich habe viel zu lange gebraucht, um das herauszufinden, hoffentlich spart dies jemandem etwas Zeit.

Hackel
quelle
1

Diese Konfiguration hat das Problem für mich gelöst:

<?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>
DIWAKAR
quelle
Ich sehe kaum einen Unterschied zwischen dieser Konfiguration und den Konfigurationen vieler anderer Antworten in dieser Frage. Wurde versucht, die Konfigurationen der älteren Antworten zu verwenden, bevor diese Konfiguration veröffentlicht wurde?
Entpnerd
1

Warnung - Hack.

Wenn Sie S3Image verwenden, um ein Bild anzuzeigen und anschließend zu versuchen, es per Abruf abzurufen, es möglicherweise in eine PDF-Datei einzufügen oder eine andere Verarbeitung durchzuführen, werden Sie gewarnt, dass Chrome das erste Ergebnis zwischenspeichert, für das keine CORS-Preflight-Anforderung erforderlich ist, und Versuchen Sie dann, dieselbe Ressource ohne die Preflight-OPTIONS-Anforderung für den Abruf abzurufen. Dies schlägt aufgrund von Browsereinschränkungen fehl.

Eine andere Möglichkeit, dies zu umgehen, besteht darin, sicherzustellen, dass das S3Image crossorigin enthält: 'use-credentials', wie oben erwähnt. Überschreiben Sie in der Datei, die Sie mit S3Image verwenden (ich habe eine Komponente, die eine zwischengespeicherte Version von S3Image erstellt, damit dies der perfekte Ort für mich ist), die Prototyp-imageEl-Methode von S3Image, um zu erzwingen, dass sie dieses Attribut enthält.

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 })));
};

403 Problem ist jetzt behoben. Was für ein Schmerz aggrr!

Philip Murphy
quelle
1
<AllowedOrigin>*</AllowedOrigin>

ist keine gute Idee, da Sie mit * jeder Website Zugriff auf die Dateien in Ihrem Bucket gewähren. Stattdessen sollten Sie angeben, welcher Ursprung genau Ressourcen aus Ihrem Bucket verwenden darf. Normalerweise ist das Ihr Domainname

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

oder wenn Sie alle möglichen Subdomains einschließen möchten:

<AllowedOrigin>*.example.com</AllowedOrigin>
Rudolf B.
quelle
1

Unten ist die Konfiguration und es ist in Ordnung, für mich zu arbeiten. Ich hoffe, es wird Ihnen helfen, Ihr Problem in AWS S3 zu beheben.

<?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>
Gaurang Sondagar
quelle
Dies funktionierte für mich zu Beginn, dann verschärfte ich die Sicherheit, indem ich nicht benötigte Methoden entfernte und sie nur für die von mir gewünschten Header spezifizierte
hitwill
0

Die akzeptierte Antwort funktioniert, aber wenn Sie direkt zur Ressource gehen, gibt es keine originübergreifenden Header. Wenn Sie Cloudfront verwenden, führt Cloudfront dazu, dass die Version ohne Header zwischengespeichert wird. Wenn Sie dann zu einer anderen URL wechseln, die diese Ressource lädt, tritt dieses herkunftsübergreifende Problem auf.

TigerBear
quelle
0

Wenn Ihre CORS-Einstellungen Ihnen nicht helfen.

Überprüfen Sie, ob die Konfiguration S3 korrekt ist. Ich hatte einen ungültigen Bucket-Namen in Storage.configure. Ich habe einen kurzen Namen für Bucket verwendet und er hat einen Fehler verursacht:

In der angeforderten Ressource ist kein Header 'Access-Control-Allow-Origin' vorhanden.

Alexander
quelle
0

Aktivieren Sie zunächst CORS in Ihrem S3-Bucket. Verwenden Sie diesen Code als Anleitung:

<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) Wenn es immer noch nicht funktioniert, stellen Sie sicher, dass Sie Ihren img-Tags auch einen "crossorigin" mit einem "*" -Wert hinzufügen. Fügen Sie dies in Ihre HTML-Datei ein:

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

Für das, was es wert ist, hatte ich ein ähnliches Problem - beim Versuch, einen bestimmten erlaubten Ursprung hinzuzufügen (nicht *).

Es stellte sich heraus, dass ich korrigieren musste

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

zu

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

(Beachten Sie den letzten Slah in der URL)

Hoffe das hilft jemandem

Yossi Vainshtein
quelle