跨域资源共享策略错误拒绝跨域图像加载

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），否则您无法在画布上绘制图像。