加载src时，Javascript Image（）缺少'Origin'头

使用canvas，尤其是Google Chrome，玩得很开心。现在，我正在通过Javascript加载一个图像，该图像将在用EaselJS包装的画布中使用。下面是我如何加载图像（托管在S3上）：

图像存储在具有以下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>

*
得到
1.
*

问题 加载上面的图像时，浏览器似乎没有设置

原点

标题。如果图像已经在javascript之外加载并由浏览器缓存，则会发生这种情况。然而——这就是奇怪的地方——一旦第二次尝试使用Javascript加载图像，CORS安全问题就会消失（显然浏览器设置了

Origin

头）

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

源文件

标题

问题

---

既然有了这些信息，我们能做些什么来解决这个问题呢？是否可以强制Amazon CloudFront始终添加CORS头？

image.crossOrigin=“Anonymous”

有问题吗？

这个问题的解决方案就是将Fastly CDN（）放在我们的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>