跨域访问fabric.Image.fromURL即使设置了crossOrigin也会破坏CORS。

Question

跨域访问fabric.Image.fromURL即使设置了crossOrigin也会破坏CORS。

javascriptamazon-s3fabricjsamazon-cloudfront

3

使用fabric.js，我正在尝试从Amazon CloudFront / S3网址加载背景图像。

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。

- Llanilek

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Quentin · Accepted Answer

当我移除crossOrigin的anon时，它会加载图像，但是它会污染画布，所以我无法使用toDataURL。

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

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

从源 'http://localhost:3000' 访问 '...' 的图像已被CORS策略阻止：请求的资源上没有'Access-Control-Allow-Origin'头。 anonymous表示“检查CORS权限，但不向不同的源发送用户凭据”。

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

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