Since HTTP cross-origin requests are not supported, an error occurs when trying to load a local file.

Question

I'm trying to use JSONLoader to load a 3D model that is stored locally on my computer into Three.js and that is in the same directory as the entire website.

I get the "Only cross-origin requests for HTTP are supported." error, but I don't know what causes it or how to fix it.

Answer 1

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...

1. Use the command cd /path/to/your/folderChange directory to the file some.html or the folder where the file is located< /p>

2. 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

3. 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...

1. Install http-server by entering npm install -g http-server

2. Switch to your working directory, where some.html is located

3. 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

Answer 2

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.