javascript - fabric.Image.fromURL 上的跨源即使设置了 crossOrigin 也会破坏 CORS

Question

我正在尝试使用 fabric.js 从 amazon cloudfront/s3 url 加载背景图片。

fabric.Image.fromURL(imgURL, function(img) {
    canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas),
    {
        scaleX: canvas.width / img.width,
        scaleY: canvas.height / img.height
    });
}, {crossOrigin: 'anonymous'});

当存在 crossOrigin 时，我得到标准错误

Access to image at '...' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

当我删除 crossOrigin 时。它会加载图像，但它会污染 Canvas ，因此我无法使用 toDataURL。

Answer 1

When I remove the crossOrigin anon. It will load the image, however it taints the canvas so that I cannot use toDataURL.

这是默认位置。如果您不指定它，那么它将不允许您执行任何需要 CORS 许可的操作。

When crossOrigin is present, I get the standard error

Access to image at '...' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

anonymous 表示“检查 CORS 权限，但不要将用户凭据发送到其他来源”。

因此，它不是只是禁止访问需要 CORS 权限的功能，而是首先检查 CORS 权限，发现您没有权限，然后禁止访问。

您需要请求图像的服务器为您的 JavaScript 提供使用 CORS 读取数据的权限。