"Cross-origin requests are only supported over HTTP." Error loading local file

Question

I'm trying to use JSONLoader to load a 3D model stored locally on my computer into Three.js, and the 3D model is in the same directory as the entire website. I'm getting a "Cross-origin requests are only supported over HTTP." error, but I don't know what's causing it or how to fix it.

P粉868586032 · Answer

To be clear - yes, the error states that you cannot point the browser directly to file://some/path/some.html

Here are some options to quickly start a local web server and let your browser render local files

Python 2

If you have Python installed...

Use the command cd /path/to/your/folderChange directory to the file some.html or the folder where the file is located
Use the command python -m SimpleHTTPServer
to start the Python web server

This will start a webserver to host your entire directory listing at http://localhost:8000

You can use a custom port python -m SimpleHTTPServer 9000 gives you the link: http://localhost:9000

This method is built into any Python installation.

Python 3

Perform the same steps but use the following command python3 -m http.server

VSCode

If you use Visual Studio Code, you can install the Live Server extension to provide a local web server environment.

Node.js

Or if you need a more responsive setup and are already using Nodejs...

Install http-server by entering npm install -g http-server
Switch to your working directory, where some.html is located
Start your http server by issuing http-server -c-1

This starts Node.js httpd, which serves the files in the directory as static files, available from

http://localhost:8080

ruby

If your preferred language is Ruby... the Ruby Gods say this works too:

ruby -run -e httpd . -p 8080

PHP

Of course PHP also has its solutions.

php -S localhost:8000

P粉710478990 · Answer

My crystal ball says you are loading the model using file:// or C:/ which matches the error message as they are not http://

So you can either install a web server on your local PC or you can upload the model somewhere else and use jsonp and change the url to http://example.com/path/to/model

Origin is defined in RFC-6454 as

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

So even if your files originate from the same host (localhost), they are considered different as long as the scheme is different (http / file) origin of.