为什么 context.getImageData() 在 https 地址上为我抛出跨域异常？

Question

我的网站上有一个画布元素，对于某些用户来说，它会引发跨域异常。该问题在 Chrome、Firefox 和 Safari 中出现，但我自己无法在任何浏览器中复制它。

Chrome 的控制台输出是：

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

错误是由库StackBlur.js引发的，它调用imageData = context.getImageData( top_x, top_y, width, height );

但是，网站上使用的图像都在相同的域、协议和端口上。路径由 Rails 生成。主路径如https://myappp.com/，图片路径如https://myapp.com/assets/promo/slideshow/slides/myslideimage.jpg

在我们的暂存站点（不使用 HTTPS）http://staging.myapp.com/ 上部署完全相同的代码并使用 http://myapp.com/assets/promo/slideshow/slides/myslideimage.jpg 之类的图像路径不会导致错误。

为什么使用 HTTPS 会导致跨域问题？

谢谢。

Answer 1

我大多是错的。事实证明，我们从 http 到 https 的重定向是在闪烁的，因此用户能够使用来自 https 的资产访问 http 版本，这意味着该错误一直是完全合法的。我从未复制过它，因为我是从浏览器历史记录中访问该网站的，即 https。

修复我们的重定向，使主请求和资产都在同一个协议上解决了这个问题。