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 anon时。 它将加载图像，但是会弄脏画布，因此我不能使用toDataURL 。

Answer 1

当我删除crossOrigin anon时。 它将加载图像，但是会弄脏画布，因此我不能使用toDataURL。

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

当存在crossOrigin时，出现标准错误

从源' http：// localhost：3000 '对'...'处的图像的访问已被CORS策略阻止：请求的资源上没有'Access-Control-Allow-Origin'标头。

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

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

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