我该如何设置CORS设置以及哪里可以使我的画布不被污染？

Question

我有一个带有图标和图片的大画布，都来自我的S3桶。当我尝试上传它（运行toDataUrl）时，Chrome会抱怨

  

无法执行＆＃39; toDataURL＆＃39; on＆＃39; HTMLCanvasElement＆＃39;：受污染的画布   可能不会被出口。

之前我遇到过这个错误，但我的解决方案是在本地托管所有图片。但这次不可能这样做，所以我需要继续解决这个问题。

谷歌搜索这个问题带来了很多关于CORS的东西，我不明白。

我在S3存储桶中尝试了以下设置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedOrigin>Anonymous</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

然而，这不起作用。

我的直觉告诉我，我必须在服务器中更改某些内容，否则此安全要求的目的是什么？

那么我该怎么做？哪里，这样我的画布就不再受到污染？

Answer 1

你的CORS配置应该是好的，最小的需要是

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

但是，您需要将<img>的{​​{3}}设置为"anonymous"。

另外，请检查s3上的图片是否已公开（应将受让人Everyone设置为Open/Download），并使用Properties标签中提供的链接您的图像文件（类似于 https://s3.yourRegion.amazonaws.com/userName/Folder/file.png）。

最后，在更改了存储桶的CORS设置后，您必须清除浏览器的缓存，否则浏览器不会向服务器发出新请求，它将使用已缓存的不安全版本。