Categories
cors file http javascript three.js

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

952

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.

7

  • 28

    Are you trying to do this locally?

    – WojtekT

    May 25, 2012 at 9:42

  • 15

    You need to use localhost, even if its local file

    – Neil

    May 25, 2012 at 9:42

  • 27

    But it sin’t cross domain!

    – corazza

    May 25, 2012 at 10:17

  • 24

    If you’re using Chrome, starting it from the terminal with the –allow-file-access-from-files option might help you out.

    Jul 3, 2013 at 20:37

  • 13

    Yeah, it’s not really cross-domain when the file is in the same folder as the webpage, now is it… I found that if you use Firefox instead of Chrome, the problem goes away.

    – Sphinxxx

    Apr 9, 2016 at 2:57

889

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

Origin is defined in RFC-6454 as

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

So even though your file originates from the same host (localhost), but as long as the scheme is different (http / file), they are treated as different origin.

15

  • 9

    Yeah, I’m trying to do this using file://, but I don’t understand why this is permitted. Well, I’m installing Lampp I guess…

    – corazza

    May 25, 2012 at 9:46

  • 167

    Imagine if that is allowed and a webapp whereby the author of the page uses something like load('file://C:/users/user/supersecret.doc') and then upload the content to their server using ajax etc.

    May 25, 2012 at 9:50

  • 8

    But I’m trying to load something from my own directory, even index.html is located there!

    – corazza

    May 25, 2012 at 9:53

  • 12

    unfortunately, policy is made for all cases, not only for yours :(, so ya gotta bear with it

    May 25, 2012 at 9:54

  • 35

    You may also use the –allow-file-access-from-files switch in chrome. Per my answer here: stackoverflow.com/questions/8449716/…

    Sep 8, 2013 at 19:43


714

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 to quickly spin up a local web server to let your browser render local files

Python 2

If you have Python installed…

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

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

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

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

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

  2. Change into your working directory, where yoursome.html lives

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

17

  • 3

    This saved me a ton of time thanks. My Python install didnt have the SimpleHTTPServer module but the node instructions worked like a charm.

    – LukeP

    Jul 25, 2014 at 3:42

  • 3

    In response to LukeP’s comment, in python 2.7 the command does work as per the instructions $ python -m SimpleHTTPServer, which produces the message: Serving HTTP on 0.0.0.0 port 8000 ... If you spell the module name wrong, e.g. $ python -m SimpleHttpServer then you will get the error message No module named SimpleHttpServer You will get a similar error message if you have python3 installed (v. python 2.7). You can check your version of python using the command: $ python --version. You can also specify the port to listen on like this: $ python -m SimpleHTTPServer 3333

    – 7stud

    Nov 20, 2014 at 1:06


  • 2

    The python server serves up files from the directory where you start the server. So if the files you want to serve up are located in /Users/7stud/angular_projects/1app, then start the server in that directory, e.g. $ cd ~/angular_projects/1app, then $ python -m SimpleHTTPServer. In your browser enter the url http://localhost:8000/index.html. You can also request files in subdirectories of the directory where you started the server, e.g. http://localhost:8000/subdir/hello.html

    – 7stud

    Nov 20, 2014 at 1:18

  • 2

    I’ve heard that Python is simple and powerful, just like “X” language, but this is ridiculous! No need to install XAMPP, or setup a simple http server js with node to serve static files – One command and boom! Thank you very much, saves a LOT of time and hassle.

    – R.D.

    May 31, 2016 at 17:59

  • 2

    AWESOME! – for Python on Windows use: python -m http.server 8080 …or whatever port you want and when you want to quit it just ctrl-c.

    Oct 19, 2016 at 15:37

179

In Chrome you can use this flag:

--allow-file-access-from-files

Read more here.

5

  • 13

    @Blairg23, keep in mind that this solution requires restarting all instances of Chrome.exe for it to work

    Jun 16, 2015 at 23:41

  • 4

    Please, explain how to use it in chrome.

    Aug 28, 2017 at 8:12

  • @Priya Should not do this though

    Dec 17, 2017 at 6:12

  • I would suggest using Chromium only for local debugging (starting it with flag --allow-file-access-from-files). It means using Chrome for common web browsing, and use Chromium as the default application for HTML file.

    May 14, 2018 at 11:23

  • Note that fetch() still denies this anyway. You must use XMLHttpRequest in some manner

    – Hashbrown

    Jan 27, 2020 at 6:00