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

Question

你好，我正在尝试使用 THREE.js GLTFLoader 加载 GLTF 模型，我收到 CORS 错误（不存在访问控制允许的来源..）我也从 s3 存储桶中提取其他资产，一切正常，除了 GLTF，所以我猜我需要将一些 CORS 标志传递给 GLTFLoader。现在：

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

Edit1：我已经尝试过：

   loader.setCrossOrigin( 'anonymous' )

和

   loader.setCrossOrigin( 'use-credentials' )

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

Answer 1

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

这很可能是服务器配置。

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

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

示例：

Answer 2

首先你需要在你的电脑上设置一个本地网络服务器，然后你需要创建一个.php文件并在其中写入以下代码： < ？ php header("Access-Control-Allow-Header: *") ?> 然后将该文件包含到您的 html 文件中。它对我有用......

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

THREE.js GLTFLoader CORS error how to enable CORS?

cors

three.js

gltf