为什么 Three.js 在加载本地 3D 模型时会抛出'跨源请求”错误，如何修复？

文件系统交互的跨源问题：解决 Three.js 中的“跨源请求”错误

尝试集成本地存储的 3D 时使用 JSONLoader 将模型导入 Three.js 时，Web 开发人员经常遇到“跨源请求仅支持HTTP”错误。此消息暗示对网络请求原理及其约束存在根本性误解。

问题的症结在于网络安全和跨域资源共享 (CORS) 之间的相互作用。当 Web 应用程序尝试访问跨源内容时，浏览器会施加限制以防止恶意行为。跨源请求本质上是从网页向另一个域发出的请求，如果没有适当限制，可能会利用用户数据。

在 Three.js 的上下文中，使用 file:// 或加载本地文件C:/ 不属于 CORS 所要求的 HTTP 协议范围。因此，浏览器正确地阻止了跨源请求，从而导致错误消息。

要克服这个障碍，有两个可行的解决方案：

1. 建立本地Web 服务器： 在您的计算机上安装 Web 服务器，并将 3D 模型托管在该服务器可访问的目录中。通过 HTTP（例如，http://localhost:8080/model.json）访问模型，您可以规避跨域问题。
2. 将模型上传到其他地方并使用 JSONP:将 3D 模型上传到可公开访问的服务器，并利用 JSONP（带有 Padding 的 JSON）动态加载它。 JSONP 利用脚本元素跨域请求外部资源的能力。将 URL 调整为 http://example.com/path/to/model，确保在服务器端正确配置 CORS 标头以允许跨源请求。

了解以下内容的细微差别跨源资源共享和接受复杂的 HTTP 协议对于解决在 Three.js 中使用本地 3D 模型时出现的“跨源请求”错误至关重要。

以上是为什么 Three.js 在加载本地 3D 模型时会抛出'跨源请求”错误，如何修复？的详细内容。更多信息请关注PHP中文网其他相关文章！