跨域資源共享策略錯誤拒絕跨域圖像加載

Question

我發現了一個非常奇怪的問題。 如下面的代碼所示，我使用canvas上傳本地圖片。 但是有時，Chrome會在將圖像繪制到畫布之前拋出錯誤“跨域資源共享策略拒絕跨域圖像加載”的錯誤！ 圖片不是問題，因為我們可以用另一台計算機上傳。

我在Windows 7 x64上使用Chrome 31

if (!options) return;
this.options = options || {};

// 圖片src為必須
if (!this.options.src) return;

this._image = new Image();
this._image.crossOrigin = "*"; // 解決跨域問題，以免污染畫布
this._image.src = this.options.src;

if (this.options.isMoving === undefined) this.options.isMoving = true;
if (this.options.isMouseWheel === undefined) this.options.isMouseWheel = true;
if (this.options.isResize === undefined) this.options.isResize = false;
if (this.options.fillStyle === undefined) this.options.fillStyle = 'white';

您可以通過鏈接看到錯誤

Answer 1

由於錯誤正試圖告訴您，除非您被允許讀取圖像URL（無論是從您自己的主機還是通過CORS），否則您無法在畫布上繪制圖像。