S3 - Header für Zugriffssteuerung-Zulassen-Ursprung

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.

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

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 .

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.

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.

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

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.

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:

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.

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

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>

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

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.

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.

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 .

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?

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

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

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.

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>

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!

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

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>

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.

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.

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

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