three.js所：通過跨來源資源共享策略拒絕

我的Chrome版本中的跨源圖像負荷爲31.0.1650.57three.js所：通過跨來源資源共享策略拒絕

我學習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，

希望有人幫助我！

謝謝！

來源

2013-11-23 Wang Liang

https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally 這是否幫助？你需要一個本地服務器來在本地運行紋理加載示例... – GuyGood

是的，我已經通過使用Node.js運行本地服務器解決了這個問題，非常感謝！ –

我通過安裝Node.js並運行本地服務器打開此html解決了此問題！

來源

2013-11-28 18:53:08

你是在本地文件系統上運行（雙擊html文件）還是在網絡服務器上運行它？如果您在Web服務器上運行它，則應避免跨源許可問題。（這是Chrome等瀏覽器的安全功能。）

來源

2013-11-27 14:12:59 Anselan

在您的圖片標籤中使用crossOrigin="anonymous"如下。

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

來源

2014-01-09 01:40:14 heshanlk

不幸的是，這不適用於通過javascript加載圖片。這就是它通過JavaScript加載圖像時的工作原理，用於WebGL。 –

我konw這個問題是你需要在你的項目或服務器環境，像上面的答案中運行的NodeJS代碼或在的appserv例如three.js所這些本地服務

來源

2014-04-24 02:01:41 Lanz

像這樣的東西應該解決它。

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'

來源

2015-06-26 16:12:06

你能否給你的答案提供一些背景知識，這樣未來的讀者可以學習如何將它應用於他們的問題，而不僅僅是在這種情況下。我還強烈建議通過http://stackoverflow.com/help/how-to-answer閱讀，使用該鏈接作爲參考可以極大地幫助您的答案的可見性和清晰度。 – Newd

three.js所：通過跨來源資源共享策略拒絕

回答

相關問題