"Cross origin requests are only supported for HTTP." error when loading a local file

2018-06-19 19:37:53

I'm trying to load a 3D model into Three.js with JSONLoader , and that 3D model is in the same directory as the entire website.

I'm getting the "Cross origin requests are only supported for HTTP." error, but I don't know what's causing it nor how to fix it.

My crystal ball says that you are loading the model using either file:// or C:/ , which stays true to the error message as they are not http://

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

Just to be explicit - Yes, the error is saying you cannot point your browser directly at file://some/path/some.html

Here are some options:

Python 2

If you have Python installed...

Change directory into the folder where your file some.html or file(s) exist using the command cd /path/to/your/folder

Start up a Python web server using the command python -m SimpleHTTPServer

This will start a web server that hosts your entire directory listing, which will be made accessible through the following URL: http://localhost:8000

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

This approach is built in to any Python installation.

Python 3

Do the same steps, but use the following command instead python3 -m http.server

Node.js

Alternatively, if you demand a more responsive setup and already use nodejs...

Install http-server by typing npm install -g http-server

Change into your working directory, where your some.html lives

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

This spins up a Node.js httpd which serves 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 as well:

ruby -run -e httpd . -p 8080

PHP

Of course PHP also has its solution.

php -S localhost:8000

In Chrome you can use this flag:

--allow-file-access-from-files