javascript THREE.js：跨域资源共享策略拒绝跨域图像加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20165063/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
THREE.js: Cross-origin image load denied by Cross-Origin Resource Sharing policy
提问by Wang Liang
My Chrome version is 31.0.1650.57
我的 Chrome 版本是 31.0.1650.57
I'm learning THREE.js and downloaded a planet sample from https://github.com/jeromeetienne/threex.planets/
我正在学习 THREE.js 并从https://github.com/jeromeetienne/threex.planets/下载了一个行星样本
But when I run the earth.html
但是当我运行 earth.html
a strange error happens as the title says:
正如标题所说，发生了一个奇怪的错误：
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
I looked through the code and find something that might be related to this error:
我查看了代码并找到了可能与此错误相关的内容：
THREEx.Planets.baseURL = '../'
...
map: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/earthmap1k.jpg'),
But I don't know how to fix it, I'm relatively new to javascript,
但我不知道如何修复它，我对 javascript 比较陌生，
hope someone would help me out!
希望有人能帮助我！
Thanks a ton!
万分感谢！
采纳答案by Wang Liang
I fixed this problem by installing Node.js and running a local server to open this html!
我通过安装 Node.js 并运行本地服务器来打开这个 html 来解决这个问题！
回答by Anselan
Are you running this on a local filesystem (double-clicking the html file) or are you running it on a web server? If you run it on a web server you should avoid the cross-origin permission problems. (This is a security feature of browsers such as Chrome.)
您是在本地文件系统上运行它（双击 html 文件）还是在 Web 服务器上运行它？如果您在 Web 服务器上运行它，您应该避免跨域权限问题。（这是 Chrome 等浏览器的安全功能。）
回答by heshanlk
Use crossOrigin="anonymous"in your image tag as below.
crossOrigin="anonymous"在您的图像标签中使用，如下所示。
<img src="SOMETHING" crossOrigin="anonymous" />
<img src="SOMETHING" crossOrigin="anonymous" />
回答by Michael Saunby
Something like this should fix it.
像这样的事情应该解决它。
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'
回答by Lanz
I konw that problem is you need to run your project or the Three.js example in server environment,like the above answer run your code in nodejs or Appserv these local serve
我知道这个问题是你需要在服务器环境中运行你的项目或 Three.js 示例，就像上面的答案在 nodejs 或 Appserv 这些本地服务中运行你的代码
