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

Question

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.

Solution 1

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.

Solution 2

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

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

Solution 3

In Chrome you can use this flag:

--allow-file-access-from-files

Read more here.

Solution 4

Ran in to this today.

I wrote some code that looked like this:

app.controller('ctrlr', function($scope, $http){
    $http.get('localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

...but it should've looked like this:

app.controller('ctrlr', function($scope, $http){
    $http.get('http://localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

The only difference was the lack of http:// in the second snippet of code.

Just wanted to put that out there in case there are others with a similar issue.

Solution 5

Just change the url to http://localhost instead of localhost. If you open the html file from local, you should create a local server to serve that html file, the simplest way is using Web Server for Chrome. That will fix the issue.

View more solutions

Comments

[WojtekT]

Are you trying to do this locally?

[Neil]

You need to use localhost, even if its local file

[James]

because of cross domain policy

[corazza]

But it sin't cross domain!

[nickiaconis]

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

[Sphinxxx]

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.

[dang]

I just added http:// before the URL and it worked

[corazza]

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

[Andreas Wong]

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.

[corazza]

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

[Andreas Wong]

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

[prauchfuss]

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

[LukeP]

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

[7stud]

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]

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]

If you have ruby installed, you can start up a server with this command: $ ruby -run -e httpd . -p 5000 (serves files out of the current dir (.) on port 5000)

[7stud]

If you have nodejs installed, you can download an http server: 1) Change directories to the directory where you want to serve files from: $ cd ~/angular_projects/1app 2) If you are using nvm: $ nvm use 0.10 (specifies the version of nodejs to activate) 3) Download and install the server as a command line command: npm install http-server -g 4) Run the server: $ http-server ., which will produce the message Starting up http-server, serving . on: http://0.0.0.0:8080. That allows you to use urls in your browser like localhost:8080/index.html.

[Alex Klaus]

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

[Andreas Wong]

@edwardtyl the browser is just displaying whatever html returned by the server and by no means is running any executable beyond that is returned (i.e. it doesn't even know what language the server is running). Do you have any documentation that backs up your statement? I'm interested.

[edwardtyl]

Oh, wait that's not what I meant to say. sorry! xD What I meant to say is that if you're running PHP on a computer, then PHP has access to all the files of the computer it is running on, while javascript will not because it will try to access the client's files (security risk) instead of the server's. This is why when you want to load a file on your server e.g. C:/hi.txt you will be able to load it through PHP (runs on the server where the file is) but not through javascript (runs on the client, which is probably a different computer).

[edwardtyl]

So for this situation ajax would be the solution.

[R.D.]

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.

[jechaviz]

If you install php or you have installed, you can start a server in your folder: php.net/manual/es/features.commandline.webserver.php

[Kristopher]

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.

[rainabba]

@AndreasWong Imagine if the page in question is loaded from file:// though, then your example is irrelevant and (like the OP and myself are saying), it's not a cross-domain issue because the domain is effectively localhost implicitly because of file://

[Umair Ahmed]

use script tag with id is better than creating server.

[Ulysses Alves]

Where can I find a crystal ball like yours? It would help me a lot in my daily programming endeavours.

[Admin]

+1 for Web Server for Chrome app link - it's by far the simplest & cleanest solution for temporary httpd setup for Chrome IMO

[WallyHale]

Brilliant! We were just about to rewrite methods to inject JSON into variables .. but this works! webView.getSettings().setAllowFileAccessFromFileURLs(true);

[Rishabh Agrahari]

Please, explain how to use it in chrome.

[Suraj Jain]

@Priya Should not do this though

[gman]

You might want to be aware that python (at least python 2's) SimpleHTTPServer is extremely slow. So slow that it's often useless for projects that load lots of images or do audio or video. Hence this question about alternatives

[Alan Zhiliang Feng]

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.

[Scott Stensland]

duplicate answer

[KimchiMan]

This is really helpful, awesome

[Nae]

In my case to be able to run POST requests with .js python was throwing 501, went with node.

[Matt]

I'm getting this error, I'm not running from file://. I'm on localhost:8001 trying to load rtmp:// stream from localhost.

[Andreas Wong]

@rainabba thanks, it's actually a good question. I have edited my answer.

[Andreas Wong]

@corazza I have updated my answer to address your question about origin

[Baahubali]

not anymore. firefox and ie are both blocking cors request for me.

[Hashbrown]

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

[Surya]

It saved me. The exact solution

[Devarshi]

This is really awesome, I owe you a 🍺 for that!

[agupta231]

Is there no reason why google-chrome --allow-file-access-from-files <url> wouldn't work and be more concise?

[Daniel Braun]

@agupta231 The webbrowser module have arguments that enable you different kinds of "opening" eg. open in current tab, new tab, new window etc.

[Adeel Shekhani]

Exactly same issue. I didn't know I was using without http:

[Martin]

Thanks, @Alex Gray. your method works for me. Can it be used for other browsers? If so, how can I do it? I tried it with Brave Browser, it did not work.

[Saurabh]

Thanks a lot for this detailed answer,

[BallpenMan]

Worked for me! I was unable to add my local json files to my leaflet map via the leaflet-ajax plugin due to the CORS policy in Chrome. I did your Python 3 solution and the layer is showing up now. Thank you!

[ner0]

I don't understand the downvoting for this answer, it does solve the issue for me in Chrome.

[priyamtheone]

@Scott Stensland: Regarding your Node.js option, after issuing http-server -c-1 to start the http server, what command do I issue to stop it later?

[priyamtheone]

After running the command http-server -c-1 to start the http server, what command do I issue to stop it later without closing the command prompt?

[Scott Stensland]

@priyamtheone the command is sync so just hit control + c in same terminal to kill that process

[priyamtheone]

@Scott Stensland: It's such a blessing to work with Node http-server smoothly. Thanks for the share. Just one thing I'd like to know, is there any tutorial available to learn more about the commands to work with http-server and manipulate its settings? I found http-server quite interesting and want to delve deeper into it, apart from starting and stopping it. So, if you can help with some tutorial/documentation links?

[Scott Stensland]

@priyamtheone typically any nodejs package is installed and managed using the tool called npm ... just google ... npm http-server ... or in general npm some-package .... the npmjs.com site has a rundown on the given package details like usage as well as its repo where its source code lives ... once installed issue ... http-server --help to display usage parameters ... these tricks follow a pattern also used by most software so when you distribute you own code you too will bake in such offerings ... welcome to open source

[Anthony]

Fixed the problem for me thanks!