crossOrigin 属性与 Chrome 上的外部图像检索混淆

Posted 2023-03-04

【中文标题】crossOrigin 属性与 Chrome 上的外部图像检索混淆

【英文标题】：crossOrigin attribute messing with the external image retrieval on Chrome

【发布时间】：2015-09-22 03:30:30

【问题描述】：

我正在使用 html Canvas 在我的页面上组合图像。我的画布元素之一是来自外部域 (Amazon S3) 的图像，我使用 CORS 检索此图像，并在图像加载时使用 crossOrigin 属性。

var image = document.createElement('img');
image.setAttribute('crossOrigin', '');
image.onload = function() 
    CANVASCONTEXT.drawImage(image, 0, 0, 200, 200)

image.setAttribute('src', MYEXTERNALURL);

并获取图像数据：

MYCANVAS.toDataURL()

在 Firefox 上一切正常。

在 Chrome 上，我无法从外部来源检索图像并收到错误：

请求中没有“Access-Control-Allow-Origin”标头 资源

好像没有设置 CORS 配置。

如果我删除 crossOrigin 属性，我可以合成我的图像，但我不能使用 toDataURL() 来获取图像数据（这是有道理的）。

你有任何指针，解决这个问题的方法吗？

谢谢

【参考方案1】：

哇，我发现了问题所在。

我两次请求外部资源（第一次检查图像是否存在，第二次向画布发出请求）。 在第二次调用时，图像被浏览器缓存。所以我猜画布无法绘制图像是因为这个图像的来源（浏览器的缓存）。

我不知道这是否有意义，但我知道我会重写这部分代码！

【参考方案2】：

Chrome 阻止了跨域查询。

您可以使用 htaccess 或主机设置来修复它。

Apache/Htaccess：

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

Nginx：

location / 
add_header Access-Control-Allow-Origin *;

您可以用德语阅读它on my blog。

【讨论】：

谢谢你的回答，我正在使用 nginx。但这并没有解决我的问题。