“仅 HTTP 支持跨源请求。”加载本地文件时出错

Question

我正在尝试使用JSONLoader将本地存储在计算机上的3D模型加载到Three.js中，并且该3D模型与整个网站位于同一目录中。我收到“跨源请求仅支持HTTP。”错误，但我不知道是什么原因导致的，也不知道如何修复它。

P粉868586032 · Answer

明确地说 - 是的，错误表明您无法将浏览器直接指向 file://some/path/some.html

这里有一些选项可以快速启动本地网络服务器，让您的浏览器呈现本地文件

Python 2

如果你安装了Python...

这将启动一个网络服务器来托管您的整个目录列表，网址为http://localhost:8000

此方法内置于任何 Python 安装中。

执行相同的步骤，但使用以下命令python3 -m http.server

如果您使用Visual Studio Code，您可以安装Live Server 扩展，提供本地 Web 服务器环境。

或者，如果您需要更具响应性的设置并且已经使用了 Nodejs...

这会启动 Node.js httpd，它将目录中的文件作为静态文件提供，可从 http://localhost:8080

如果您的首选语言是 Ruby ...Ruby Gods 说这也有效：

ruby -run -e httpd . -p 8080

当然PHP也有它的解决方案。

php -S localhost:8000

P粉710478990 · Answer

我的水晶球说您正在使用 file:// 或 C:/ 加载模型，这与错误消息相符，因为它们不是http://

因此，您可以在本地 PC 上安装网络服务器，也可以将模型上传到其他位置并使用 jsonp 并将 url 更改为 http://example.com/path/to/型号

...they have the same
   scheme, host, and port.  (See Section 4 for full details.)

因此，即使您的文件源自同一主机 (localhost)，但只要方案不同 (http / file ），它们被视为不同的来源。