erhalten Sie über Cross-Origin Ressourcenfreigabe auf Amazon Aws

Question

Ich erstelle eine Virtual Reality 360-Grad-Video-Website mit dem Krpano HTML5-Player.

Das lief gut bis zum Testen auf Safari und ich erkannte, dass es nicht funktioniert hat. Der Grund dafür ist, dass Safari CORS (Cross-Origin Resource Sharing) für Videos, die über WebGL laufen, nicht unterstützt.

Um zu klären, ob meine Videos wo auf dem gleichen Server mit meinen Anwendungsdateien funktionieren würden, aber weil ich meine Dateien auf Amazon S3 gehostet habe, sind sie CORS. Jetzt bin ich unsicher, was zu tun ist, weil ich meine Anwendung auf digitalem Ozean gebaut habe, der an meinen Amazon S3-Eimer anschließt, aber ich kann es mir nicht leisten, mein Tröpfchen aufzuladen, nur um den Speicher zu bekommen, den ich benötige (was ungefähr 100 GB beträgt und beginnen wird in Zukunft zu Terrabytes und meine Videosammlung wird größer).

Also weiß jemand einen Weg, wie ich das umgehen kann, um es so aussehen zu lassen, als ob das Video nicht von einem anderen Ursprung käme oder alternativ irgendetwas, was ich tun könnte, um an diesem Hindernis vorbeizukommen?

Gibt es eine Möglichkeit, dass ich amazon s3 und amazon EC2 so einrichten kann, dass sie sich nicht als Cross-Origin-Ressource teilen?

EDIT:

ich meine Videos wie folgt laden:

<script> 

function showVideo(){ 
    embedpano({ 

     swf:"/krpano/krpano.swf", 

     xml:"/krpano/videopano.xml", 

     target:"pano", 

     html5:"only", 

    }); 

} 

</script> 

Diese ruft dann meine XML-Datei, die die Videodatei aufruft:

<krpano> 
    <!-- add the video sources and play the video --> 
    <action name="add_video_sources"> 
     videointerface_addsource(‘medium', 'https://s3-eu-west-1.amazonaws.com/myamazonbucket/Shoots/2016/06/the-first-video/videos/high.mp4|https://s3-eu-west-1.amazonaws.com/myama…ideos/high.webm'); 
     videointerface_play(‘medium'); 
    </action> 
</krpano> 

Ich weiß nicht, genau wie krpano core funktioniert, gehe ich davon aus, dass das javascript die URLs aus der XML-Datei holt und dann eine Anfrage stellt, sie einzuziehen.

Answer 1

@datasage erwähnt in Kommentaren, dass CloudFront eine gebräuchliche Lösung ist. Ich weiß nicht, ob er daran gedacht hat, aber es wird sicherlich funktionieren.

I described using this solution to solve a different problem, in detail, on Server Fault. In diesem Fall ging es darum, die Hauptseite und "/ blog/*" von einem anderen Server unter einem einzigen Domainnamen zu integrieren, um eine einheitliche Website zu erstellen.

Dies ist genau das gleiche, was Sie brauchen, aus einem anderen Grund.

Erstellen Sie eine CloudFront-Verteilung und legen Sie den alternativen Domänennamen auf den Namen Ihrer Website fest.

Erstellen Sie zwei (oder mehr) Ursprungsserver, die auf Ihre Ursprungsserver mit dynamischem und statischem Inhalt verweisen.

Verwenden einer von ihnen als Standard, anfänglich alle möglichen Pfadmuster Handhabung (*, das Standard-Cache-Verhalten) und dann entsprechende Pfade bahnen zur anderen Ursprung Punkt (zB /asset/* zum Eimer zeigen könnte, während das Standardverhalten verweist auf die Anwendung selbst). In diesem Fall wird CloudFront anders als für seinen primären Zweck als CDN verwendet. Stattdessen nutzen wir einen sekundären Zweck und verwenden es als Reverse-Proxy, der Anfragen selektiv an mehrere Back-Ends weiterleiten kann auf dem Pfad der Anfrage, ohne dass dem Browser bekannt ist, dass es tatsächlich mehrere Ursprünge gibt, da alles hinter dem einzelnen Hostnamen steht, der auf CloudFront verweist (was natürlich auf CloudFront in DNS verweisen muss).)

Die Caching-Funktionen können deaktiviert werden, wenn Sie sie noch nicht vollständig benötigen, insbesondere bei Anfragen an die Anwendung selbst, wo die Deaktivierung des Cachings einfach durch Auswahl der Option zum Weiterleiten aller Anforderungsheader erfolgen kann der Ursprung in jedem Cache-Verhalten, das Anfragen an die Anwendung selbst sendet. Stellen Sie für Ihre Objekte in S3 sicher, dass Sie die entsprechenden Cache-Control-Header für die Objekte festgelegt haben, wenn Sie sie hochgeladen haben, oder Sie können sie nach dem Hochladen mithilfe der S3-Konsole hinzufügen.

Nebenbonus, mit CloudFront können Sie einfach SSL für die gesamte Website mit einem kostenlosen SSL-Zertifikat von Amazon Certificate Manager (ACM) aktivieren. Das Zertifikat muss in der Region "us-east-1" von ACM erstellt werden, unabhängig davon, wo sich Ihr Bucket befindet. Dies ist die Region, die CloudFront beim Abrufen des Zertifikats von ACM verwendet. Dies ist nur eine Bereitstellungsrolle und hat keine Auswirkungen auf die Leistung, wenn sich Ihr Bucket in einer anderen Region befindet.

Answer 2

Sie müssen Ihren Host unter CORS-Konfiguration Ihres AWS-S3-Buckets zulassen.

Siehe Fügen Sie die CORS-Konfiguration in Editing Bucket Permissions hinzu.

Daher wird jede Anfrage, die Sie an die S3-Bucket-Dateien stellen, mit CORS-Headern versehen.

Im Fall, dass Sie dann gehen Sie wie folgt vor, um den Inhalt über AWS-CDN Cloudfront dienen, ignorieren , wenn Sie Server-Inhalte direkt über S3:

1. Zum AWS Cloudfront-Konsole.
2. Wählen Sie Ihre CloudFront-Verteilung aus.
3. Wechseln Sie zur Registerkarte Verhalten.
4. Erstellen Sie ein Verhalten (für die Dateien, die mit CORS-Header bedient werden müssen).
5. Pfadmuster eingeben, Protokoll & Methoden auswählen.
6. Wählen Sie All in Forward Header Option.
7. Speichern Sie das Verhalten.
8. Falls erforderlich, machen Sie die CloudFront Edge-Caches ungültig, indem Sie eine Invalidierungsanforderung für die Dateien ausführen, die Sie gerade für CORS zugelassen haben.