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 Origin
Antwortheader.
Antworten:
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.Weitere Informationen finden Sie in diesem Artikel zum Bearbeiten der Bucket-Berechtigung .
quelle
HEAD
zu denAllowedMethod
sIch 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:
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.
quelle
<AllowedHeader>*</AllowedHeader>
dass es funktioniert (besser, wenn Sie dies tun, um eine neue Regel für Ihre SiteWenn Ihre Anfrage keinen
Origin
Header 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 enthaltenOrigin
.quelle
img
Tags ändern kann ? Ich kann keine verschiedenen Header senden, der Browser sendet die Anfrage@ 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.
quelle
HEAD
Methode hat es geschafft.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 .So sieht es für mich aus.
quelle
<img>
, aber ich habe es nurcrossOrigin="true"
aus Versehen gesagt . DANKE!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
Origin
es zum Feld "Whitelist" hinzugefügt wird. Weitere Informationen finden Sie unter Konfigurieren von CloudFront unter Berücksichtigung der CORS-Einstellungen in den AWS-Dokumenten.quelle
HTTP Request Methods
in 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 anfordernurl string
: dh nach einer Bild-, Video- oder Audiodatei.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:
Chrome hatte bereits eine andere Version zwischengespeichert und NIEMALS versucht, die
crossorigin
Version erneut abzurufen (selbst wenn ich siecrossorigin
für die angezeigten Bilder verwendet habe.Um das Problem zu beheben, habe ich
?crossorigin
es 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 findenquelle
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
AllowedHeader
von der StandardeinstellungAuthorization
zu*
dem CORS config:quelle
<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.)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 arbeitenWie bei anderen Status müssen Sie zuerst die CORS-Konfiguration in Ihrem S3-Bucket haben:
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
quelle
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:
Gewinnt:
Ich hoffe, das erspart jemandem das Haarziehen.
quelle
Ich habe alle Antworten oben ausprobiert und nichts hat funktioniert. Eigentlich brauchen wir 3 Schritte von den obigen Antworten zusammen, damit es funktioniert:
Wie von Flavio vorgeschlagen; Fügen Sie Ihrem Bucket die CORS-Konfiguration hinzu:
Auf dem Bild; Crossorigin erwähnen:
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.
quelle
Legen Sie die CORS-Konfiguration in den Berechtigungseinstellungen für Ihren S3-Bucket fest
S3 fügt CORS-Header nur hinzu, wenn die HTTP-Anforderung den
Origin
Header enthält.CloudFront leitet nicht weiter
Origin
Header standardmäßigSie müssen den
Origin
Header in den Verhaltenseinstellungen für Ihre CloudFront-Distribution auf die Whitelist setzen .quelle
Ich habe Folgendes behoben:
Warum
<AllowedHeader>*</AllowedHeader>
arbeitet und<AllowedHeader>Authorization</AllowedHeader>
nicht?quelle
fwuensche "Antwort" ist korret, um ein CDN einzurichten; Dabei habe ich MaxAgeSeconds entfernt.
quelle
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.
quelle
Diese Konfiguration hat das Problem für mich gelöst:
quelle
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.
403 Problem ist jetzt behoben. Was für ein Schmerz aggrr!
quelle
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
oder wenn Sie alle möglichen Subdomains einschließen möchten:
quelle
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.
quelle
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.
quelle
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:quelle
Aktivieren Sie zunächst CORS in Ihrem S3-Bucket. Verwenden Sie diesen Code als Anleitung:
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:
quelle
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
zu
(Beachten Sie den letzten Slah in der URL)
Hoffe das hilft jemandem
quelle