Javascript 尽管'；访问控制允许原点：'；来自公共API

下面是我用来抓取图像的代码：

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和.CrossOriginal行时，图像显示出来。但是，当我尝试访问图像数据时，会出现以下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.

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

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

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.

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

因为大都会博物馆的API是公开的，所以在我从中检索链接的JSON和图像本身上，“Access Control Allow Origin”头都设置为“*”

---

有什么想法吗？

如果您可以控制域

images.metmuseum.org

，您可以在服务器端添加此标题

---

如果您不这样做，浏览器将不允许您这样做。您唯一的选择是编写服务器端脚本，以便为您捕获映像。

您是从文件系统还是从服务器运行此脚本？我现在也从文件系统运行此脚本。关于错误消息，我已经找了好几个小时了，但我找到的唯一有用的信息是在我最初关于使用Mozilla的CORS和canvases的文章中的链接上。你不能从文件系统中使用Ajax。据我所见，该图像的响应中没有访问控制Allow Origin头，使用

curl-I-H进行测试“来源：https://example.com" https://images.metmuseum.org/CRDImages/ad/original/ap53.226.1.jpg

不幸的是，我不在Met工作，但幸运的是，两个链接都有“Access Control Allow Origin”标题，并设置为访问来自所有域的请求。你可以在这里看到一个例子：@RawsonD。它还需要设置在实际为图像提供服务的域上，才能正常工作