THREE.js：跨域资源共享策略拒绝跨域图像加载答案

【问题标题】：THREE.js: Cross-origin image load denied by Cross-Origin Resource Sharing policyTHREE.js：跨域资源共享策略拒绝跨域图像加载
【发布时间】：2013-12-08 12:37:09
【问题描述】：

我的 Chrome 版本是 31.0.1650.57

我正在学习 THREE.js 并从https://github.com/jeromeetienne/threex.planets/下载了一个行星样本

但是当我运行 earth.html

正如标题所说，发生了一个奇怪的错误：

THREE.WebGLRenderer 59 three.min.js:424
Cross-origin image load denied by Cross-Origin Resource Sharing policy. earth.html:1
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': the canvas has been tainted by cross-origin data. threex.planets.js:73
(anonymous function) threex.planets.js:73

我查看了代码并找到了可能与此错误有关的内容：

THREEx.Planets.baseURL  = '../'
...
map: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/earthmap1k.jpg'),

但我不知道如何解决它，我对 javascript 比较陌生，

希望有人能帮助我！

非常感谢！

【问题讨论】：

github.com/mrdoob/three.js/wiki/How-to-run-things-locally 这有帮助吗？您需要一个本地服务器来在本地运行纹理加载示例...
是的，我已经通过使用 Node.js 运行本地服务器解决了这个问题，非常感谢！

标签： javascript canvas three.js cross-domain cors

【解决方案1】：

这样的事情应该可以解决它。

var imageObj = new Image()
imageObj.onload = function(){
 THREE.ImageUtils.loadTexture(imageObj)
 // or maybe load image into canvas?
}
imageObj.crossOrigin="anonymous"
imageObj.src = THREEx.Planets.baseURL+'images/earthmap1k.jpg'

【讨论】：

您能否为您的答案提供一些背景信息，以便未来的读者可以学习如何将其应用于他们的问题，而不仅仅是在这种情况下。我还强烈建议您阅读stackoverflow.com/help/how-to-answer，使用该链接作为参考可以极大地提高您的答案的可见性和清晰度。

【解决方案2】：

我知道这个问题是你需要在 服务器环境 中运行你的项目或 Three.js 示例，就像上面的答案在 nodejs 或 Appserv 这些本地服务中运行你的代码

【讨论】：

【解决方案3】：

在您的图像标签中使用crossOrigin="anonymous"，如下所示。

<img src="SOMETHING" crossOrigin="anonymous" />

【讨论】：

不幸的是，这不适用于通过 javascript 加载图像。这就是 WebGL 通过 javascript 加载图像时的工作原理。

【解决方案4】：

我通过安装 Node.js 并运行本地服务器来打开这个 html 解决了这个问题！

【讨论】：

【解决方案5】：

您是在本地文件系统上运行它（双击 html 文件）还是在 Web 服务器上运行它？如果你在 web 服务器上运行它，你应该避免跨域权限问题。（这是 Chrome 等浏览器的安全功能。）

【讨论】：