【问题标题】：Javascript Image() missing `Origin` header when loading src加载 src 时 Javascript Image() 缺少“Origin”标头
【发布时间】：2015-07-03 17:27:51
【问题描述】：

在画布上玩得开心，尤其是 Google Chrome。现在我正在通过 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 之外加载并由浏览器缓存，则尤其会发生这种情况。然而 - 这就是奇怪的地方 - 一旦 second 尝试使用 Javascript 加载图像，然后 CORS 安全问题就消失了（显然浏览器设置了 Origin 标头）。

我们已经多次测试了这种行为，并且还通过设置一个服务器来确认它，该服务器在每个响应中强制使用 CORS 标头。即使明确询问，浏览器似乎也没有添加 Origin 标头。

问题

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

【问题讨论】：

请发布此问题的正确答案。如果你能解决这个问题。

标签： javascript html cors

【解决方案1】：

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

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

【讨论】：