it-swarm.com.de

S3 - Access-Control-Allow-Origin Header

Hat es jemandem geschafft, Access-Control-Allow-Origin zu den Antwort-Headern hinzuzufügen? Was ich brauche, ist etwa so:

<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 den Header Access-Control-Allow-Origin: * enthalten.

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 Sie vielleicht erwarten, gibt es keinen Origin-Antwortheader.

135
Wowzaaa

Normalerweise müssen Sie in den Bucket-Eigenschaften nur "CORS-Konfiguration hinzufügen" hinzufügen.

Amazon-screen-shot

Der <CORSConfiguration> enthält einige Standardwerte. Das ist alles, was ich brauchte, um dein Problem zu lösen. Klicken Sie einfach auf "Speichern" und versuchen Sie es erneut. Wenn dies nicht der Fall ist, können Sie auch den folgenden Code (von alxrb answer) ausprobieren, der bei den meisten Leuten funktioniert hat.

<?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 unter Bearbeiten der Bucket-Berechtigung .

136
Flavio Wuensche

Ich hatte ein ähnliches Problem mit dem Laden von Webfonts. Als ich auf "CORS-Konfiguration hinzufügen" klickte, war dieser Code bereits in den Bucket-Eigenschaften 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 zu einem Vergnügen geführt. Meine benutzerdefinierten Web-Schriftarten wurden in IE & Firefox geladen. Ich bin kein Experte, ich dachte nur, das könnte Ihnen helfen.

93
alxrb

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

Ich habe einfach die Methode HEAD hinzugefügt und auf "Save" geklickt, und es begann zu arbeiten.

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

34
Senica Gonzalez

Wenn Ihre Anforderung keine Origin-Kopfzeile angibt, schließt S3 die CORS-Kopfzeilen nicht in die Antwort ein. Das hat mich wirklich beeindruckt, weil ich ständig versucht habe, die Dateien zu kräuseln, um den CORS zu testen, aber curl enthält nicht Origin.

27
eremzeit

Dies ist eine einfache Möglichkeit, dies zu erreichen.

Ich weiß, dass dies eine alte Frage ist, aber immer noch schwer 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 mit dem Parameter crossorigin: "anonymous" anfordern.

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

Fügen Sie in AWS S3 die URL Ihrer Website zu CORS hinzu. Hier ist ein Hinweis von Amazon darüber. Gehen Sie einfach zu Ihrem Bucket und wählen Sie "Properties" aus den Registerkarten rechts aus, öffnen Sie "Permissions" und klicken Sie auf "Edit CORS Configuration".

Ursprünglich hatte ich < AllowedOrigin> auf * gesetzt. Ändern Sie einfach das Sternchen in Ihre URL. Achten Sie darauf, Optionen wie http:// und https:// in separaten Zeilen anzugeben. Ich habe erwartet, dass der Stern "All" akzeptiert, aber anscheinend müssen wir genauer sein. 

So sieht es für mich aus. 

 enter image description here

27
Horacio

Siehe die obigen Antworten. (aber ich hatte auch einen Chromfehler)

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

In meinem Fall habe ich Bilder geladen und auf der Seite angezeigt. Beim Anklicken erstellte ich eine neue Instanz von ihnen:

// 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 crossorigin-Version erneut abzurufen (auch wenn ich crossorigin für die angezeigten Bilder verwendet habe.).

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

15
Funkodebat

Ich werde einfach zu dieser Antwort - hinzufügen, welche mein Problem gelöst hat.

Um den AWS/CloudFront-Verteilungspunkt so einzustellen, dass er den CORS Origin-Header nach vorne leitet, klicken Sie in die Bearbeitungsschnittstelle für den Verteilungspunkt:

 enter image description here

Gehen Sie zur Registerkarte "Verhalten" und bearbeiten Sie das Verhalten. Ändern Sie die Whitelist-Überschriften von "Keine" in "Whitelist". Stellen Sie dann sicher, dass Origin zum Whitelist-Feld hinzugefügt wird.

 enter image description here

14
MikeiLL

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

Für mich war es wichtig, AllowedHeader von der Vorgabe Authorization in * in der CORS-Konfiguration zu ändern: 

<?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. 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 Header Origin hat.

  3. CloudFront nicht leitet Origin standardmäßig weiter

    Sie müssen den Header Origin in den Verhaltenseinstellungen für Ihre CloudFront Distribution als Whitelist angeben. 

3
Pawel Furmaniak

Ich habe das Problem 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 funktioniert <AllowedHeader>*</AllowedHeader> und <AllowedHeader>Authorization</AllowedHeader> nicht?

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

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

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

    <img href="abc.jpg" crossorigin="anonymous">
    
  3. Verwenden Sie ein CDN? Wenn alles funktioniert, wird eine Verbindung zum Origin-Server hergestellt, aber NICHT über CDN. Dies bedeutet, dass Sie einige Einstellungen in Ihrem CDN benötigen, wie zum Beispiel CORS-Header. Die genaue Einstellung hängt davon ab, welche CDN Sie verwenden. 

2
Deepak

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

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

Ich bin bei diesem Thread angekommen, und es stellte sich heraus, dass keine der oben genannten Lösungen auf meinen Fall zutraf. Es stellte sich heraus, ich musste einfach einen abschließenden Schrägstrich aus dem <AllowedOrigin>in der CORS-Konfiguration meines Buckets entfernen.

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 die Haare.

1
Charney Kaye

Warnung - Hack.

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

Eine andere Möglichkeit, dies zu umgehen, besteht darin, sicherzustellen, dass S3Image Crossorigin enthält: 'use-credentials' (Anmeldeinformationen verwenden), 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, sodass dies der perfekte Ort für mich ist), die prototype imageEl-Methode von S3Image, um zu erzwingen, dass dieses Attribut enthalten ist.

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!

1
Philip Murphy
<AllowedOrigin>*</AllowedOrigin>

dies ist keine gute Idee, da Sie mit * jeder Website Zugriff auf die Dateien in Ihrem Eimer gewähren. Stattdessen sollten Sie angeben, in welchem ​​Origin genau Ressourcen aus Ihrem Bucket verwendet werden dürfen. Normalerweise ist das Ihr Domainname

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

oder wenn Sie alle möglichen Subdomains einbinden wollen:

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

Wie andere Staaten auch Status haben, müssen Sie zunächst 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 immer noch nicht. Ich habe Chrome verwendet (wahrscheinlich das gleiche Problem mit anderen Browsern).

Das Problem war, dass Chrome hat das Bild mit den Headern zwischengespeichert (nicht die CORS-Daten enthalten), also egal was ich in AWS zu ändern versuchte, ich würde meine CORS-Header nicht sehen.

Nachdem Chrome-Cache geleert und die Seite neu geladen wurde hatte das Bild die erwarteten CORS-Header

0
Tonio

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

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

0
hackel

Die akzeptierte Antwort funktioniert, aber wenn Sie direkt zur Ressource wechseln, gibt es anscheinend keine ursprungsübergreifenden Header. Wenn Sie Cloudfront verwenden, wird Cloudfront die Version ohne Header zwischenspeichern. Wenn Sie dann zu einer anderen URL wechseln, die diese Ressource lädt, tritt dieses ursprungsübergreifende Problem auf.

0
TigerBear

Unten ist die Konfiguration und es ist in Ordnung für mich zu arbeiten. Ich hoffe, es wird Ihnen dabei 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>
0

Diese Konfiguration löste das Problem für mich:

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