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读取数据的权限。