javascript - CORS : How to solve security Issue with Safari and Firefox while using AWS S3 and canvas. 到数据网址？

Question

我正在将 Meteor 与 React 结合使用，react-image-crop ，我通过 S3 和 Cloudfront 托管的图像 src，部署在 Heroku 上。为了在 Safari 和 Firefox 上实现 canvas.toBlob() 功能，我添加了 Javascript-Canvas-To-Blob .

在裁剪图像时，我从 Safari 和 Firefox 收到安全错误:

SecurityError: The operation is insecure.

SecurityError (DOM Exception 18): The operation is insecure.

将我指向 canvas.toDataURL()。

我对自己的理解非常不自信，但可以这样说吗，问题是由于客户端(我的浏览器)和 S3 服务器之间的直接连接造成的，它们具有不同的域，因此违反了 same domain policy ？

所以我通过以下方式在我的客户端(浏览器)域中加载图像

let img = new Image();
img.onload = function() {
  console.log(img.src);
}
img.src = S3DomainUrl;

现在我创建了一个 Canvas ，在 Canvas 上绘制“裁剪”图像并将其转换为 blob:

var canvas = document.createElement('canvas');                                                                                                                                 
... (cropSizes)
var ctx = canvas.getContext('2d');
ctx.drawImage(loadedImage, pixelCrop.x, pixelCrop.y, pixelCrop.width, pixelCrop.height, 0, 0, pixelCrop.width, pixelCrop.height);
canvas.toBlob(function(blob) {
  console.log(URL.createObjectURL(blob));
});

问题一定出在这里。在 Safari/Firefox 中 Javascript-Canvas-To-Blob使用 canvas.toDataURL()，这似乎是不允许的，因为它是从 S3 域上的客户端域执行的？

因此 Javascript 向 S3 发送了一个请求图像的 HTTP 请求。 S3 使用仍然属于 S3 域的 img 进行应答。现在我的客户端无法执行 canvas.toDataURL() 操作，因为它作用于来自 S3 域的 img？

最后，如何正确设置 S3 的 CORS 和我的 Meteor 客户端以相互通信？

Answer 1

要将 CORS 配置添加到您的 S3 存储桶: S3 - Access-Control-Allow-Origin Header

要在您的代码中使用 CORS 图像，请添加以下行:img.crossOrigin = "Anonymous"; 像这样的地方:

let img = new Image();

img.crossOrigin = "Anonymous";

img.onload = function() {
  console.log(img.src);
}
img.src = S3DomainUrl;

更多信息见:

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes