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

【问题标题】：Cross origin on fabric.Image.fromURL breaks CORS even with crossOrigin set即使设置了 crossOrigin，fabric.Image.fromURL 上的交叉原点也会破坏 CORS
【发布时间】：2019-07-28 06:00:37
【问题描述】：

我正在尝试使用 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 anon.它会加载图像，但它会污染画布，因此我无法使用toDataURL。

【问题讨论】：

标签： javascript amazon-s3 fabricjs amazon-cloudfront

【解决方案1】：

当我删除 crossOrigin anon.它会加载图像，但它会污染画布，因此我无法使用 toDataURL。

这是默认位置。如果你不指定它，那么它将不允许你做任何需要 CORS 权限的事情。

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

CORS 策略已阻止从源“http://localhost:3000”访问“...”处的图像：请求的资源上不存在“Access-Control-Allow-Origin”标头。

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

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

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

【讨论】：

CORS 政策已经在 S3 上获得了许可，我还能缺少什么？
@NeilAshleyHickman — 错误消息显示“请求的资源上不存在‘Access-Control-Allow-Origin’标头。” ......所以那里没有正确设置 CORS 政策。
对于稍后查看此问题的任何人。如果你在 AWS 上更新你的 CORS 策略......清除你的缓存。
嗨@Llanilek，一个客户端遇到了这个问题——我们有一个CORS配置，我们已经清除了缓存，但我们仍然看到它，必须打开开发者工具才能停止它。