即使设置了 crossOrigin，fabric.Image.fromURL 上的交叉原点也会破坏 CORS

Question

使用 fabric.js 我正在尝试从亚马逊加载背景图片 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 表示 "Check for CORS permission, but don't send user credentials to a different origin".

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

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

即使设置了 crossOrigin，fabric.Image.fromURL 上的交叉原点也会破坏 CORS

Cross origin on fabric.Image.fromURL breaks CORS even with crossOrigin set

javascript

amazon-s3

fabricjs

amazon-cloudfront