Cross origin requests are only supported for HTTP but it's not cross-domain

Question

I'm using this code to make an AJAX request:

$("#userBarSignup").click(function(){
    $.get("C:/xampp/htdocs/webname/resources/templates/signup.php",
        {/*params*/},
        function(response){
            $("#signup").html("TEST");
            $("#signup").html(response);
        },
        "html");

But from the Google Chrome JavaScript console I keep receiving this error:

XMLHttpRequest cannot load file:///C:/xampp/htdocs/webname/resources/templates/signup.php. Cross origin requests are only supported for HTTP.

The problem is that the signup.php file is hosted on my local web server that's where all the website is run from so it's not cross-domain.

How can I solve this problem?

Have you tried maybe using an HTTP URL instead of a local path? — Edward Thomson, Dec 09 '11 at 18:00
@EdwardThomson It worked! But now i have to set `allow_url_include = On` in my server configuration. — siannone, Dec 09 '11 at 18:05
Possible duplicate of ["Cross origin requests are only supported for HTTP." error when loading a local file](https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local) — , Jul 08 '17 at 13:06

prauchfuss · Answer 1 · 2013-12-17T18:03:33.017

120

I've had luck starting chrome with the following switch:

--allow-file-access-from-files

On os x try (re-type the dashes if you copy paste):

open -a 'Google Chrome' --args -allow-file-access-from-files

On other *nix run (not tested)

 google-chrome  --allow-file-access-from-files

or on windows edit the properties of the chrome shortcut and add the switch, e.g.

 C:\ ... \Application\chrome.exe --allow-file-access-from-files

to the end of the "target" path

edited Dec 17 '13 at 18:03

answered Jan 23 '13 at 22:58

prauchfuss

1,930
3
17
20

7

Works in Google Chrome (at least as of v24) in principle, but note that on OS X you must invoke it as follows: `open -a 'Google Chrome' --args —allow-file-access-from-files`. Also note: If you specify a file://-based URL (rather than a file-system path), be sure to use `file://localhost/...` rather than `file:///...`. – mklement0 Jan 29 '13 at 22:37
7

Last time I tried to do this in windows the method above didn't work. I ended up having to launch chrome from the DOS prompt with the switch following... Imperfect but workable. – prauchfuss Dec 23 '13 at 19:49
Works great on Linux. – user1205577 Sep 16 '14 at 14:35
Works fine on OS X Yosemite 10.10.2 and Chrome Version 41.0.2272.89 (64-bit). – The Dude Mar 15 '15 at 13:14
In Windows you can use `start chrome --allow-file-access-from-files`. For me it was necessarry to close all instances of Chrome before. – lumapu Nov 09 '22 at 11:00
It worked like a charm but on windows the shortcut address format stays like `"C:\Program Files\Google\Chrome\Application\chrome.exe" /allow-file-access-from-files` – Rafael Lima Aug 26 '23 at 12:10

score 91 · Answer 2 · edited Dec 26 '22 at 07:48

If you’re working on a little front-end project and want to test it locally, you’d typically open it by pointing your local directory in the web browser, for instance entering file:///home/erick/mysuperproject/index.html in your URL bar. However, if your site is trying to load resources, even if they’re placed in your local directory, you might see warnings like this:

XMLHttpRequest cannot load file:///home/erick/mysuperproject/mylibrary.js. Cross origin requests are only supported for HTTP.

Chrome and other modern browsers have implemented security restrictions for Cross Origin Requests, which means that you cannot load anything through file:/// , you need to use http:// protocol at all times, even locally -due Same Origin policies. Simple as that, you’d need to mount a webserver to run your project there.

This is not the end of the world and there are many solutions out there, including the good old Apache (with VirtualHosts if you’re running several other projects), node.js with express, a Ruby server, etc. or simply modifying your browser settings.

However there’s a simpler and lightweight solution for the lazy ones. You can use Python’s SimpleHTTPServer. It comes already bundled with python so you don’t need to install or configure anything at all!

So cd to your project directory, for instance

1 cd /home/erick/mysuperproject and then simply use

1 python -m SimpleHTTPServer And that’s it, you’ll see this message in your terminal

1 Serving HTTP on 0.0.0.0 port 8000 ... So now you can go back to your browser and visit http://0.0.0.0:8000 with all your directory files served there. You can configure the port and other things, just see the documentation. But this simply trick works for me when I’m in a rush to test a new library or work out a new idea.

EDIT: In Python 3+, SimpleHTTPServer has been replaced with http.server. So In Python 3.3, for example, the following command is equivalent:

python -m http.server 8000

The lazy solution is awesome. Very straightforward, you don't need to do anything else. — Nico, Apr 23 '14 at 04:24
I use Xampp on windows, it's simple, tho I'd recommend using node, also don't forget to unblock port 80 on skype to allow the server to run — Timo Huovinen, Feb 22 '17 at 11:06

score 76 · Accepted Answer · answered Dec 09 '11 at 18:02

76

You need to actually run a webserver, and make the get request to a URI on that server, rather than making the get request to a file; e.g. change the line:

    $.get("C:/xampp/htdocs/webname/resources/templates/signup.php",

to read something like:

    $.get("http://localhost/resources/templates/signup.php",

and the initial request page needs to be made over http as well.

answered Dec 09 '11 at 18:02

Anya Shenanigans

91,618
3
107
122

This worked like a charm. Now i have to set `allow_url_include = On` in my server configuration. Can i safely enable it or it will cause some safety issues? – siannone Dec 09 '11 at 18:07
The $.get is actually issued in the javascript context of the web browser, so that file needs to have the URL reference - code that is written in php can still reference local files without issue – Anya Shenanigans Dec 10 '11 at 15:25
44

Alternatively there's the Python solution: (1) navigate a console to the folder, (2) enter `python -m SimpleHTTPServer 8888`, then (3) navigate browser to `http://localhost:8888/` – geotheory Nov 04 '13 at 02:15
+1 this helped a lot to [resolve](http://stackoverflow.com/a/19866904/1671639) my problem. Thanks a lot :) – Praveen Nov 08 '13 at 19:27
@geotheory your solution worthwhiles a 100 point credit solution :) – Vahid Rafiei Jul 03 '14 at 13:49
That's some dedicated feedback :) But it's really just a basic first step in web design.. – geotheory Oct 13 '14 at 09:15
5

Note for Python 3 users: use `python -m http.server 8888` – Jelle Fresen Jul 25 '15 at 00:50
`php -S localhost:8000` is another option – Pranav Kasetti Mar 10 '20 at 17:28

score 10 · Answer 4 · edited Apr 14 '17 at 16:18

I was getting the same error while trying to load simply HTML files that used JSON data to populate the page, so I used used node.js and express to solve the problem. If you do not have node installed, you need to install node first.

Install express npm install express
Create a server.js file in the root folder of your project, in my case one folder above the files I wanted to server

Put something like the following in the server.js file and read about this on the express gihub site:

var express = require('express');
var app = express();
var path = require('path');

// __dirname will use the current path from where you run this file 
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, '/FOLDERTOHTMLFILESTOSERVER')));

app.listen(8000);
console.log('Listening on port 8000');

After you've saved server.js, you can run the server using:

node server.js

Go to http://localhost:8000/FILENAME and you should see the HTML file you were trying to load

score 5 · Answer 5 · answered Oct 06 '16 at 03:53

If you have nodejs installed, you can download and install the server using command line:

npm install -g http-server

Change directories to the directory where you want to serve files from:

$ cd ~/projects/angular/current_project

Run the server:

$ http-server

which will produce the message Starting up http-server, serving on:

Available on: http://your_ip:8080 and http://127.0.0.1:8080

That allows you to use urls in your browser like

http://your_ip:8080/index.html

score 1 · Answer 6 · answered Jan 04 '16 at 19:04

It works best this way. Make sure that both files are on the server. When calling the html page, make use of the web address like: http:://localhost/myhtmlfile.html, and not, C::///users/myhtmlfile.html. Make usre as well that the url passed to the json is a web address as denoted below:

$(function(){
                $('#typeahead').typeahead({
                    source: function(query, process){
                        $.ajax({
                            url: 'http://localhost:2222/bootstrap/source.php',
                            type: 'POST',
                            data: 'query=' +query,
                            dataType: 'JSON',
                            async: true,
                            success: function(data){
                                process(data);
                            }
                        });
                    }
                });
            });

score 0 · Answer 7 · answered Sep 18 '19 at 20:53

REM kill all existing instance of chrome 
taskkill /F /IM chrome.exe /T
REM directory path where chrome.exe is located
set chromeLocation="C:\Program Files (x86)\Google\Chrome\Application"
cd %chromeLocation%
cd c:
start chrome.exe --allow-file-access-from-files

change chromeLocation path with yours.
save above as .bat file.
drag drop you file on the batch file you created. (chrome does give restore pages option though so if you have pages open just hit restore and it will work).

Pranav Kasetti · Answer 8 · 2020-03-11T17:44:45.677

0

You can also start a server without python using php interpreter.

E.g:

cd /your/path/to/website/root
php -S localhost:8000

This can be useful if you want an alternative to npm, as php utility comes preinstalled on some OS' (including Mac).

edited Mar 11 '20 at 17:44

answered Mar 10 '20 at 17:26

Pranav Kasetti

8,770
2
50
71

score 0 · Answer 9 · edited Aug 31 '20 at 08:23

0

For all python users:

Simply go to your destination folder in the terminal.

cd projectFoder

then start HTTP server For Python3+:

python -m http.server 8000

Serving HTTP on :: port 8000 (http://[::]:8000/) ...

go to your link: http://0.0.0.0:8000/

Enjoy :)

edited Aug 31 '20 at 08:23

h3t1

1,126
2
18
29

answered Aug 30 '20 at 18:49

Shiwanshu Kumar

1
1

Cross origin requests are only supported for HTTP but it's not cross-domain

9 Answers9

Linked

Related