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

Posted 2023-03-04

技术标签:

【中文标题】THREE.js：跨域资源共享策略拒绝跨域图像加载【英文标题】：THREE.js: Cross-origin image load denied by Cross-Origin Resource Sharing policy 【发布时间】：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 运行本地服务器解决了这个问题，非常感谢！ 【参考方案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'

【讨论】：

您能否为您的答案提供一些背景信息，以便未来的读者可以学习如何将其应用于他们的问题，而不仅仅是在这种情况下。我还强烈建议您阅读***.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】：