Javascript chrome 中的three.js 拒绝跨源图像加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8018118/
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
Cross-origin image load denied with three.js in chrome
提问by Nami WANG
Trying to add material in THREE.jslike this
尝试THREE.js像这样添加材料
var materialWall = new materialClass( { color: 0xffffff, map: THREE.ImageUtils.loadTexture( 'images/a.png' ) } );
It works fine in Chrome, IE, FF, until 3 days ago, after Chrome updated itself to the latest dev version 17.
它在 Chrome、IE、FF 中运行良好，直到 3 天前，在 Chrome 将自身更新到最新的开发版本 17 之后。
Chrome 17 just doesn't load the image and complains the following
Chrome 17 只是不加载图像并抱怨以下内容
Cross-origin image load denied by Cross-Origin Resource Sharing policy.
That's insane since the image is clearly in the same domain, so is this an issue of chrome or THREE.js or something else?
这太疯狂了，因为图像显然在同一个域中，所以这是 chrome 或 THREE.js 的问题还是其他问题？
采纳答案by Mr.doob
https://github.com/mrdoob/three.js/issues/687refers to an issue on three.js' GitHub, which has good list of workarounds, including a link to a wiki page describing how to run locally. There are also some other workarounds in the thread, including adding the following to your scripts:
https://github.com/mrdoob/three.js/issues/687指的是three.js 的GitHub 上的一个问题，它有很好的解决方法列表，包括一个指向描述如何在本地运行的wiki 页面的链接。该线程中还有一些其他解决方法，包括将以下内容添加到您的脚本中：
THREE.ImageUtils.crossOrigin = "";
Or, adding CORS headers so that they are specifically allowed.
或者，添加 CORS 标头，以便明确允许它们。
Note that most of this information was added from the already existing link to the issue, which the original author of this answer did not include.
请注意，此信息的大部分是从该问题的现有链接中添加的，此答案的原始作者未包含该链接。
回答by Orbiting Eden
If you are running Chrome from localhost and using Three.js, you probably need to run Chrome with this command line flag:
如果您从本地主机运行 Chrome 并使用 Three.js，您可能需要使用以下命令行标志运行 Chrome：
c:// ... /chrome.exe --allow-file-access-from-files
回答by Tim
If you:
如果你：
- don't want to set up your own server, and
- don't want to downgrade your browser's security
- 不想设置自己的服务器，并且
- 不想降低浏览器的安全性
then I worked out a way around this which involves only a little bit of effort:
然后我想出了一个解决这个问题的方法，只需要一点点努力：
- Convert the image into Base64 text
- Store it in an external Javascript file
- Link it to your project page
- Load it into your texture
- 将图像转换为 Base64 文本
- 将其存储在外部 Javascript 文件中
- 将其链接到您的项目页面
- 将其加载到您的纹理中
Full details can be found at http://tp69.wordpress.com/2013/06/17/cors-bypass/for those that are interested.
感兴趣的人可以在http://tp69.wordpress.com/2013/06/17/cors-bypass/上找到完整的详细信息。
回答by Santosh
You can also run a simple HTTP server using python by running the following command from your root folder.
您还可以通过从根文件夹运行以下命令来使用 python 运行一个简单的 HTTP 服务器。
python -m SimpleHTTPServer 8000
回答by Swapnil Hadge
1) Chrome shortcut -> Properties -> Shortcut tab -> target and add --allow-file-access-from-filesin target at last. (kill all the chrome tasks before doing this.)
1) Chrome 快捷方式 -> 属性 -> 快捷方式选项卡 ->目标，最后在目标中添加 --allow-file-access-from-files。（在执行此操作之前终止所有 chrome 任务。）
OR
或者
2) Download Mongoose web serversoftware. Put it in your working directory, and run it. It will open in the browser http://localhost:PORTwhere it will serve all your files.
2) 下载猫鼬网络服务器软件。把它放在你的工作目录中，然后运行它。它将在浏览器中打开http://localhost:PORT，它将为您的所有文件提供服务。
OR
或者
3) You can also use NodeJS serverin your application.
3) 您也可以在您的应用程序中使用NodeJS 服务器。
回答by Ice101781
this worked for me at the command line\terminal:
这在命令行\终端对我有用：
./chrome.exe --disable-web-security
*note that you must close all instances of chrome before executing the command for it to work.
*请注意，您必须在执行命令之前关闭所有 chrome 实例才能使其工作。
回答by RAFI SHAIK
Perfect solution for:
完美解决方案：
THREE.js: Cross-origin image load denied
THREE.js：跨域图片加载被拒绝
Just add timestampto the image url. I don't know the logic behind it, but it works.
只需将时间戳添加到图像 url。我不知道它背后的逻辑，但它有效。
Example:
例子：
var material = new THREE.MeshBasicMaterial({
map: loader.load(url + "?v=" + (new Date()).toString(), function() {
animate();
})
});
