Spaß haben mit Canvas und vor allem Google Chrome. Im Moment lade ich ein Bild über Javascript, das in einem Canvas mit EaselJS verwendet werden soll. Hier ist, wie ich das Bild bin Laden (hosted auf S3):Javascript Image() fehlt `Origin` Header beim Laden von src
imageLoad: function(imageUrl, imageId) {
var image = new Image();
image.crossOrigin = "Anonymous";
image.imageId = imageId
image.onload = this.handleImageLoad;
image.src = imageUrl;
}
Bilder gespeichert sind, auf einem Amazon S3 Eimer mit den folgenden CORS Eigenschaften:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>1</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Das Problem
Es scheint, dass der Browser die Origin Kopfzeile nicht einstellt, wenn das Bild oben geladen wird. Dies ist besonders dann der Fall, wenn das Bild bereits außerhalb von Javascript geladen und vom Browser zwischengespeichert wurde. Allerdings - und hier ist, wo es komisch wird - sobald ein Sekunde Versuch gemacht wird, das Bild mit Javascript zu laden, dann gehen CORS Sicherheitsprobleme weg (und anscheinend legt der Browser einen Origin Header fest).
Wir haben dieses Verhalten mehrfach getestet und es auch bestätigt, indem wir einen Server eingerichtet haben, der CORS-Header mit jeder Antwort erzwingt. Es scheint, dass der Browser Origin Header nicht hinzufügt, auch wenn explizit gefragt wird.
Die Frage
So alle diese Informationen gegeben, was können wir tun, um das Problem zu arbeiten? Kann Amazon CloudFront gezwungen werden, immer CORS-Header hinzuzufügen? Gibt es ein Problem mit image.crossOrigin = "Anonymous"?