重写后的标题为：加载本地文件时遇到“跨域请求仅支持HTTP”错误提示

Question

我正在尝试使用JSONLoader将存储在我的计算机上的3D模型加载到Three.js中，而这个3D模型与整个网站位于同一个目录中。

我遇到了"跨域请求仅支持HTTP协议"的错误，但我不知道是什么原因导致的，也不知道如何修复它。

Answer 1

明确一点 - 是的，错误是说您不能直接在浏览器中指向file://some/path/some.html

以下是一些快速启动本地Web服务器以让您的浏览器呈现本地文件的选项

Python 2

如果您已经安装了Python...

1. 使用命令cd /path/to/your/folder进入包含您的文件some.html或文件的文件夹

2. 使用命令python -m SimpleHTTPServer启动Python Web服务器

这将在http://localhost:8000上启动一个Web服务器来托管您的整个目录列表

3. 您可以使用自定义端口python -m SimpleHTTPServer 9000，链接为：http://localhost:9000

这种方法已内置在任何Python安装中。

Python 3

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

VSCode

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

Node.js

或者，如果您需要一个更灵敏的设置并且已经使用nodejs...

1. 通过输入npm install -g http-server安装http-server

2. 切换到包含some.html的工作目录

3. 通过发出http-server -c-1启动您的http服务器

这将启动一个Node.js httpd，将您目录中的文件作为静态文件提供，可以从http://localhost:8080访问

Ruby

如果您的首选语言是Ruby ... Ruby之神说这也可以：

ruby -run -e httpd . -p 8080

PHP

当然，PHP也有解决方案。

php -S localhost:8000

Answer 2

我的水晶球告诉我，你正在使用file://或C:/加载模型，这符合错误信息，因为它们不是http://

所以你可以在本地计算机上安装一个Web服务器，或者将模型上传到其他地方，并使用jsonp并将URL更改为http://example.com/path/to/model

在RFC-6454中定义了起源

...它们具有相同的
   方案、主机和端口。（有关详细信息，请参见第4节。）

所以即使你的文件来源于相同的主机（localhost），但只要方案不同（http / file），它们被视为不同的起源。