THREE.js GLTFLoader CORS 错误如何启用 CORS？答案

【问题标题】：THREE.js GLTFLoader CORS error how to enable CORS?THREE.js GLTFLoader CORS 错误如何启用 CORS？
【发布时间】：2020-02-17 19:03:48
【问题描述】：

您好，我正在尝试使用 THREE.js GLTFLoader 加载 GLTF 模型，但出现 CORS 错误（不存在 access-control-allowed-origin ..）我也从 s3 存储桶中提取其他资产并且一切正常，除了 GLTF，所以我的猜测是我需要将一些 CORS 标志传递给 GLTFLoader。现在：

    this.loader = new THREE.GLTFLoader();
    this.loader.load(avatar_path, gltf => {..})

Edit1：我已经尝试过：

   loader.setCrossOrigin( 'anonymous' )

和

   loader.setCrossOrigin( 'use-credentials' )

没有成功。总是相同的 CORS 错误。

【问题讨论】：

使用 stackoverflow.com/posts/58490553/edit 编辑/更新问题并粘贴浏览器在 devtools 控制台中记录的确切错误消息。还要说明您是否已启用 CORS，您尝试从中加载图像的 s3 存储桶。

标签： three.js cors gltf

【解决方案1】：

您不需要在 three.js 中设置任何内容。 Three.js 在需要时自动请求 CORS 权限。

这很可能是服务器配置。

打开浏览器的开发工具，转到网络选项卡，重新加载页面，查看 .gltf 文件的请求和响应。您应该在“请求”（来自浏览器）中看到一个 CORS 标头，并在响应（来自 S3）中看到一个“access-control-allow-origin: *”标头。我的猜测是服务器的响应缺少标头，这意味着您的服务器配置不正确。

只是一个猜测，但如果加载到三个.js 中的图像工作，而不是页面本身上的图像，因为那些不需要 CORS 权限）而是实际纹理，那么问题是您的 S3 配置为仅发送某些类型的 CORS的文件。如果使用纹理的图像也不起作用，那么问题是更基本的 CORS 配置

例子：

【讨论】：

【解决方案2】：

首先你需要在你的电脑上设置一个本地网络服务器，然后你需要创建一个 .php 文件并将以下代码写入其中：然后将该文件包含到您的 html 文件中。它对我有用......?

【讨论】：