Probleme Aktivieren CORS auf S3

Habe ich eingerichtet, CORS auf einem S3-bucket etwa so:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

Hier ein screenshot der AWS-Konsole: https://dzwonsemrish7.cloudfront.net/items/341y0o1n1X2a0O1X2s38/Screen%20Shot%202012-10-09%20at%209.59.44%20PM.png?v=2478ad83

Wenn ich meinen Farbe-Dieb javascript-ein Bild, das auf derselben domain gehostet, alles funktioniert wie erwartet, aber wenn ich den Punkt auf eine Anlage in meinem S3-bucket, unabhängig davon, ob ich mein script von localhost, lvh.mich (die Punkte auf 127.0.0.1), oder aus der realen Internet herum, bekomme ich Fehler wie dies in Chrome 22:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18

und diese in Firefox 15:

SecurityError: The operation is insecure.

Hier ist, was der Header Aussehen wie im Google Chrome-Netzwerk-Inspektor:

Request URL:https://s3.amazonaws.com/assets-zeke.heroku.com/addons-zeke.heroku.com/catalogs/58/original.png
Request Method:GET
Status Code:304 Not Modified

Request Headers
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Host:s3.amazonaws.com
If-Modified-Since:Tue, 09 Oct 2012 22:52:57 GMT
If-None-Match:"6de1a52294934c5e288894b84100d99b"
Referer:http://localhost:5000/marketplace/addons/sendgrid/edit
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.79 Safari/537.4

Response Headers
HTTP/1.1 304 Not Modified
x-amz-id-2: qGvoGlvpKeSSzelanWsIPDF3zd5wQzHTr27NZoUbhNqAM1QzmKcWHnTqIkKVxF/m
x-amz-request-id: FD24FB8CA244E327
Date: Wed, 10 Oct 2012 05:20:53 GMT
Last-Modified: Tue, 09 Oct 2012 22:52:57 GMT
ETag: "6de1a52294934c5e288894b84100d99b"
Server: AmazonS3

Und hier ist, was der Header Aussehen nach änderte ich die URL-Struktur zu {bucket}.s3.amazonaws.com (und entfernt die Zeit)
aus meiner bucket-Namen ein.

Request URL:http://assets-zeke.s3.amazonaws.com/addons-zeke.heroku.com/catalogs/58/original.png
Request Method:GET
Status Code:200 OK
Request Headers

Request Headers
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:assets-zeke.s3.amazonaws.com
Pragma:no-cache
Referer:http://lvh.me:5000/marketplace/addons/airbrake/edit
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.79 Safari/537.4

Response Headers
Accept-Ranges:bytes
Content-Length:6696
Content-Type:image/png
Date:Wed, 10 Oct 2012 17:56:17 GMT
ETag:"6de1a52294934c5e288894b84100d99b"
Last-Modified:Wed, 10 Oct 2012 17:50:38 GMT
Server:AmazonS3
x-amz-id-2:UGVKQ9VQbJ82DLDxR53uDP0ZUMgla+e0GU5vO9yLr6MsY8wijl9KnM7fOyDlT+ta
x-amz-request-id:8A16CF1E02A0106C

Darf ich nicht sehen Access-Control-Allow-Origin: * hier? Funktioniert die 304 bedeuten, dass Amazon ist das caching der Antwort?

  • Gefunden eine Lösung? Ich bin mit den gleichen Problemen. Wäre wirklich sehr dankbar, wenn Sie möchten, aktualisieren Sie mit einer Antwort.
InformationsquelleAutor Zeke | 2012-10-10
  1. 6

    Anforderungs-URL:https://s3.amazonaws.com/assets-zeke.heroku.com/addons-zeke.heroku.com/Kataloge/58/original.png

    Gut, es ist Ihr problem. Aufgrund der Art und Weise, dass CORS und andere cross-domain-Dinge, die Arbeit, die Sie verwenden müssen DNS-style-Adressierung Zugriff auf Ihre buckets.

    Vorausgesetzt, Ihr original-URL korrekt ist (es sieht nicht so aus, aber ich könnte völlig falsch sein), würden Sie wollen, um diese URL zu verwenden anstelle:

    http://assets-zeke.heroku.com.s3.amazonaws.com/addons-zeke.heroku.com/catalogs/58/original.png

    In anderen Worten:

    http://{bucket}.s3.amazonaws.com/path/object.ext

    Check out: http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html weitere Erklärung.

    • Guter Punkt. Ich änderte das URL-Schema, um {bucket}.s3.amazonaws.com (und nahm den Punkt (.) aus meiner bucket-Namen, aber ich bin immer noch nicht zu sehen, werden diese Header. Ich habe den neuen Header auf meine Frage.
    • Hast du auf den Grund des Problems? Ich habe ähnliche Probleme.
    • Ich landete das schreiben eines blog-post über meine Erkenntnisse auf zeke.heroku.com/blog/2012/10/11/s3-cors-canvas. Danke für die Erinnerung mir den link hier posten.
    • Ihren blog laden nicht für mich. Kannst du hier etwas zu deiner Frage?
    • Sorry, mein blog gestorben ist, sondern die source-content-lebt in diesem github repo: github.com/zeke/zeke.heroku.com/blob/master/source/_posts/...
    • Wie bereits in dem blog-post, war es für mich wichtig, um auch die Erzeugung der Bilder in JS, und legen Sie die "crossOrigin" Eigenschaft auf Sie. (Mit Bildern aus dem DOM geladen, aus der anderen Domäne nicht funktioniert.) Vielen Dank Maximilian!

    InformationsquelleAutor Ryan Parman
  2. 8

    Dies kann verursacht werden, indem Sie nicht mit aktiviert CORS in Ihrem Bild-element, bevor es geladen hat:

    imgEl.crossOrigin = '';
    InformationsquelleAutor ændrük
Schreibe einen Kommentar