为什么context.getImageData（）会在https地址上为我抛出跨域异常？

Question

我的网站上有一个canvas元素，对于某些用户来说，它会抛出跨域异常。问题出现在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。

修复我们的重定向，以便主要请求和资产都在同一协议上解决问题。