The rewritten title is: "Cross-domain requests only support HTTP" error message encountered when loading local files

Question

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

I encountered the error "Cross-origin requests only support HTTP protocol", but I don't know what causes it or how to fix it.

Answer 1

Just to be clear - yes, the error is saying that you cannot point directly in the browser to file://some/path/some.html

Here are some options for quickly launching a local web server to let your browser render local files

Python 2

If you already have Python installed...

1. Use the command cd /path/to/your/folderGo to the folder containing your file some.html or file

2. Use commandpython -m SimpleHTTPServerStart the Python Web server

This will start a web server on http://localhost:8000 to host your entire directory listing

3. You can use a custom portpython -m SimpleHTTPServer 9000, the link is: 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 are using Visual Studio Code, you can install the Live Server extension, which provides a local web server environment.

Node.js

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

1. By entering npm install -g http-serverInstallhttp-server

2. Switch to the working directory containing some.html

3. Start your http server by issuing http-server -c-1

This will start a Node.js httpd serving the files in your directory as static files accessible 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 a solution.

php -S localhost:8000

Answer 2

My crystal ball tells me that you are loading the model using file:// or C:/, which fits the error message since they are not http:// /

So you can install a web server on your local machine, or upload the model elsewhere, and use jsonp and change the URL to http://example.com/path/ to/model

Origin is defined in RFC-6454

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

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