加载src时,Javascript Image()缺少`Origin`标头

Question

与画布,特别是谷歌浏览器玩得开心.现在我正在通过Javascript加载图像,这个图像将在用EaselJS包装的画布中使用.这是我如何加载图像(托管在S3上):

imageLoad: function(imageUrl, imageId) {
  var image = new Image();
  image.crossOrigin = "Anonymous";
  image.imageId = imageId
  image.onload = this.handleImageLoad;
  image.src = imageUrl;
}

图像存储在具有以下CORS属性的Amazon S3存储桶中:

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

问题

Origin加载上面的图像时,浏览器似乎没有设置标题.如果图像已经在javascript之外加载并由浏览器缓存,则尤其会发生这种情况.然而 - 这里变得奇怪 - 一旦第二次尝试使用Javascript加载图像,那么CORS安全问题就会消失(显然浏览器会设置Origin标题).

我们已多次测试此行为,并通过设置一个强制CORS标头与每个响应的服务器来确认它.Origin即使明确询问,浏览器似乎也没有添加标题.

问题

因此,鉴于所有这些信息,我们可以做些什么来解决这个问题？是否可以强制Amazon CloudFront添加CORS标头？有问题image.crossOrigin = "Anonymous"吗？

Answer 1

这个问题的解决方案只是将 Fastly CDN ( http://fastly.com ) 放在我们的 S3 存储桶前面。这是一种不太漂亮的处理方式，但我们能够在服务的“设置”部分下注入自定义标头。

这是这个特定问题的解决方案。