使用 Three.js 加载本地文件时如何修复'仅支持 HTTP 的跨源请求”错误？

使用 Three.js 加载本地文件：跨源请求故障排除

尝试使用 JSONLoader 将本地 3D 模型加载到 Three.js 时，您可能会遇到“仅 HTTP 支持跨源请求”。错误。此错误是由于您的本地文件和网络浏览器之间的协议不同而导致的。

错误原因

出现此错误是因为浏览器限制跨源请求默认情况下。出于安全原因，它们阻止网站访问来自不同来源的资源。从您的计算机加载本地文件时，浏览器会认为它具有与您的网站不同的来源，而您的网站通常通过 HTTP 提供服务。

修复错误

要解决此错误，您有两个选择：

1. 安装本地Web 服务器：

   • 在本地计算机上安装 Web 服务器，例如 XAMPP 或 Apache，并在服务器上托管 3D 模型。
   • 将 JSONLoader 的 URL 更改为您的模型的路径webserver。

2. 远程上传模型：

   • 将您的 3D 模型上传到远程服务器，例如 GitHub， AWS S3，或免费托管服务。
   • 将 JSONLoader 的 URL 更新为远程 URL。

了解来源

来源定义为方案、主机和端口的组合。在这种情况下，方案（HTTP/文件）、主机（localhost）和端口（通常为 80）不同。正如 RFC-6454 中所述：“...它们具有相同的方案、主机和端口。”因此，即使文件来自同一主机，但不同的方案会导致不同的来源。

通过遵循这些解决方案，您可以成功地将本地 3D 模型加载到 Three.js 中，并避免“跨源请求”仅支持 HTTP。”错误。

以上是使用 Three.js 加载本地文件时如何修复'仅支持 HTTP 的跨源请求”错误？的详细内容。更多信息请关注PHP中文网其他相关文章！