chrome 中的three.js 拒绝了跨域图像加载

Posted 2023-02-27

【中文标题】chrome 中的three.js 拒绝了跨域图像加载

【英文标题】：Cross-origin image load denied with three.js in chrome

【发布时间】：2011-12-22 12:26:50

【问题描述】：

尝试像这样在THREE.js 中添加素材

var materialWall = new materialClass(  color: 0xffffff, map: THREE.ImageUtils.loadTexture( 'images/a.png' )  );

它在 Chrome、IE、FF 中运行良好，直到 3 天前，在 Chrome 将自身更新到最新的开发版本 17 之后。

Chrome 17 只是不加载图像并抱怨以下内容

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

这太疯狂了，因为图像显然在同一个域中，所以这是 chrome 或 THREE.js 的问题还是其他什么？

【参考方案1】：

如果您从 localhost 运行 Chrome 并使用 Three.js，您可能需要使用以下命令行标志运行 Chrome：

c:// ... /chrome.exe --allow-file-access-from-files

【讨论】：

好吧，但用户不会运行该命令.. 这对我来说似乎不是一个可行的解决方案

如何在ubuntu中应用这个？

对于 Mac：/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files

【参考方案2】：

https://github.com/mrdoob/three.js/issues/687 指的是three.js 的GitHub 上的一个问题，其中有很好的解决方法列表，包括a link to a wiki page describing how to run locally。线程中还有一些其他解决方法，包括将以下内容添加到您的脚本中：

THREE.ImageUtils.crossOrigin = "";

或者，添加 CORS 标头以便明确允许它们。

^{请注意，大部分信息是从已存在的问题链接中添加的，此答案的原始作者未包括在内。}

【讨论】：

我今天仍然遇到这个问题 - 你知道这个问题是否已经修复或..？我是最新的...任何解决方法？？

一年多后今天修复它的最佳方法？

请不要让您的答案只是一个链接。在您的答案中包含相关详细信息，以便如果链接失效（例如，如果项目被移动到另一个帐户 [并且您忘记更改此链接]，或重命名，或删除特定问题，或 GitHub 更改其命名约定, 或者...) 你的答案还是有一定价值的。

@QPaysTaxes 不幸的是，此用户是最后一次出现在 2011 年 11 月 20 日 14:08...

【参考方案3】：

如果你：

不想设置自己的服务器，并且 不想降低浏览器的安全性

然后我想出了一个解决这个问题的方法，只需要一点点努力：

将图片转换为Base64文本 将其存储在外部 javascript 文件中 将其链接到您的项目页面 将其加载到您的纹理中

有兴趣的人可以在http://tp69.wordpress.com/2013/06/17/cors-bypass/找到完整的详细信息。

【参考方案4】：

您还可以通过从根文件夹运行以下命令，使用 python 运行一个简单的 HTTP 服务器。

python -m SimpleHTTPServer 8000

【参考方案5】：

1) Chrome 快捷方式 -> 属性 -> 快捷方式选项卡 -> 目标和 最后在目标中添加 --allow-file-access-from-files。 （在执行此操作之前杀死所有 chrome 任务。）

或

2) 下载 Mongoose 网络服务器 软件。把它放在你的工作目录中，然后 运行。它将在浏览器 http://localhost:PORT 中打开，它将提供您的所有文件。

或

3) 您也可以在您的应用程序中使用 NodeJS 服务器。

【参考方案6】：

这在命令行\终端对我有用：

./chrome.exe --disable-web-security

*请注意，您必须在执行命令之前关闭 chrome 的所有实例才能使其工作。

【参考方案7】：

完美的解决方案：

THREE.js：跨域图片加载被拒绝

只需将时间戳添加到图片网址即可。我不知道它背后的逻辑，但它确实有效。

例子：

var material = new THREE.MeshBasicMaterial(
  map: loader.load(url + "?v=" + (new Date()).toString(), function() 
    animate();
  )
);

【讨论】：

这不起作用，我不确定如何防止 CORS 错误。它唯一阻止的是缓存。另外，您最好使用 (new Date()).getTime() 而不是 "toString()"