尽管来自公共 API 的“Access-Control-Allow-Origin: *”，但访问被 CORS 阻止的图像答案

【问题标题】：Access to image blocked by CORS despite 'Access-Control-Allow-Origin: *' from public API尽管来自公共 API 的“Access-Control-Allow-Origin: *”，但访问被 CORS 阻止的图像
【发布时间】：2020-12-31 16:12:30
【问题描述】：

这是来自https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image 我用来抓取图像的代码：

let imgURL = obj.primaryImage;
img = new Image();
img.src = imgURL;
img.crossOrigin = "Anonymous";
img.addEventListener("load", imageProcess, false);

function imageProcess() {
   const canvas = document.getElementById('imgCanvas');
   let ctx = canvas.getContext('2d');
   ctx.drawImage(img, 0, 0);
   let imgData = ctx.getImageData(5,5,1,1).data;
}

当我注释掉 .getImageData 和 .crossOrigin 行时，图像就会显示出来。但是，一旦我尝试访问图像数据，就会出现以下 CORS 错误：

Access to image at 'https://images.metmuseum.org/CRDImages/ad/original/ap53.226.1.jpg' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

如果我只注释掉包含.crossOrigin的那一行，就会出现如下错误：

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

由于大都会博物馆的 API 是公开的，因此我从中检索链接的 JSON 和图像本身的“Access-Control-Allow-Origin”标头都设置为“*”。

有什么想法吗？

【问题讨论】：

你是从文件系统还是从服务器运行这个
还有please search the error message
我现在正在从文件系统运行它。关于错误消息，我已经查找了几个小时，但我发现的唯一有用信息是我原始帖子中关于使用 Mozilla 的 CORS 和画布的链接。
你不能从文件系统进行 Ajax
据我所见，该图像的响应中没有 Access-Control-Allow-Origin 标头，使用curl -i -H "Origin: https://example.com" https://images.metmuseum.org/CRDImages/ad/original/ap53.226.1.jpg进行测试

标签： javascript cors

【解决方案1】：

如果您可以控制域images.metmuseum.org，则可以在服务器端添加此标头。

如果您不这样做，浏览器将不允许您这样做。您唯一的选择是编写为您抓取图像的服务器端脚本。

【讨论】：

不幸的是，我不在 Met 工作，但幸运的是，两个链接都存在“Access-Control-Allow-Origin”标头，并且设置为访问来自所有域的请求。你可以在这里看到一个例子：collectionapi.metmuseum.org/public/collection/v1/objects/10245>
@RawsonD。它还需要设置在实际提供图像的域上才能正常工作