加载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存储桶前面。这是一种不那么漂亮的做事方式，但我们能够在＆＃34;设置＆＃34;下注入自定义标题。我们的服务部分。

这是解决这个特殊问题的方法。