爲什麼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）訪問了該網站。

修復我們的重定向，以便主要請求和資產在同一個協議上解決問題。