XMLHttpRequest cannot load file. Cross origin requests are only supported for HTTP

Question

I am getting the following error:

XMLHttpRequest cannot load file:///C:/Users/richa.agiwal/Desktop/get/rm_Library/templates/template_viewSettings.html. Cross origin requests are only supported for HTTP.

I realize that this question has been answered before, but I still have not found a solution to my problem. I tried running chrome.exe --allow-file-access-from-files from the command prompt, and moved the file to the local file system, but I still get the same error.

I appreciate any suggestions!

Maybe similar in here! http://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local/38320697#38320697 — Ngô Đức Tuấn, Jul 12 '16 at 05:37
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:07

Alan Wells · Accepted Answer · 2014-01-25T19:07:50.493

If you are doing something like writing HTML and Javascript in a code editor on your personal computer, and testing the output in your browser, you will probably get error messages about Cross Origin Requests. Your browser will render HTML and run Javascript, jQuery, angularJs in your browser without needing a server set up. But many web browsers are programed to watch for cross site attacks, and will block requests. You don't want just anyone being able to read your hard drive from your web browser. You can create a fully functioning web page using Notepad++ that will run Javascript, and frameworks like jQuery and angularJs; and test everything just by using the Notepad++ menu item, RUN, LAUNCH IN FIREFOX. That's a nice, easy way to start creating a web page, but when you start creating anything more than layout, css and simple page navigation, you need a local server set up on your machine.

Here are some options that I use.

Test your web page locally on Firefox, then deploy to your host.
or: Run a local server

Test on Firefox, Deploy to Host

Firefox currently allows Cross Origin Requests from files served from your hard drive
Your web hosting site will allow requests to files in folders as configured by the manifest file

Run a Local Server

Run a server on your computer, like Apache or Python
Python isn't a server, but it will run a simple server

Run a Local Server with Python

Get your IP address:

On Windows: Open up the 'Command Prompt'. All Programs, Accessories, Command Prompt
I always run the Command Prompt as Administrator. Right click the Command Prompt menu item and look for Run As Administrator
Type the command: ipconfig and hit Enter.
Look for: IPv4 Address . . . . . . . . 12.123.123.00
There are websites that will also display your IP address

If you don't have Python, download and install it.

Using the 'Command Prompt' you must go to the folder where the files are that you want to serve as a webpage.

If you need to get back to the C:\ Root directory - type cd/
type cd Drive:\Folder\Folder\etc to get to the folder where your .Html file is (or php, etc)
Check the path. type: path at the command prompt. You must see the path to the folder where python is located. For example, if python is in C:\Python27, then you must see that address in the paths that are listed.
If the path to the Python directory is not in the path, you must set the path. type: help path and hit Enter. You will see help for path.
Type something like: path c:\python27 %path%
%path% keeps all your current paths. You don't want to wipe out all your current paths, just add a new path.
Create the new path FROM the folder where you want to serve the files.
Start the Python Server: Type: python -m SimpleHTTPServer port Where 'port' is the number of the port you want, for example python -m SimpleHTTPServer 1337
If you leave the port empty, it defaults to port 8000
If the Python server starts successfully, you will see a msg.

Run You Web Application Locally

Open a browser
In the address line type: http://your IP address:port
http://xxx.xxx.x.x:1337 or http://xx.xxx.xxx.xx:8000 for the default
If the server is working, you will see a list of your files in the browser
Click the file you want to serve, and it should display.

More advanced solutions

Install a code editor, web server, and other services that are integrated.

You can install Apache, PHP, Python, SQL, Debuggers etc. all separately on your machine, and then spend lots of time trying to figure out how to make them all work together, or look for a solution that combines all those things.

I like using XAMPP with NetBeans IDE. You can also install WAMP which provides a User Interface for managing and integrating Apache and other services.

If you are not familiar with running commands from the MSDOS command prompt, you can get more info at Wikipedia: [link]http://en.wikipedia.org/wiki/List_of_DOS_commands — Alan Wells, Dec 14 '13 at 01:36
Is there a way of resolving this issue only with wamp? I am running wamp and still receiving this message. Apache, php and mysql are all up-to-date — user2883071, Dec 24 '14 at 18:52
Unfortunately I haven't been using WAMP, and don't have an answer for you. Maybe ask a new question specific to your set up. — Alan Wells, Dec 24 '14 at 18:59
Is there a way to disable the cross origin check or add the file:// protocol to it? I'm working in a mobile webview that shows file://s that map to resources in the apk and I'm trying to load a babel js script which internally transforms — mtsvetkov, Jan 05 '16 at 11:47
Nevermind, fixed it by fidgeting with the app intents and allowed nav hrefs. On the desktop I added the cors headers to chrome for debugging. — mtsvetkov, Jan 05 '16 at 12:37
Awesome, on Windows `>python -m SimpleHTTPServer` _Serving HTTP on 0.0.0.0 port 8000 ..._ and now I can load — Anatoli, Sep 27 '16 at 22:02

Sushant Kr · Answer 2 · 2017-08-14T16:41:16.290

93

Simple Solution

If you are working with pure html/js/css files.

Install this small server(link) app in chrome. Open the app and point the file location to your project directory.

Goto the url shown in the app.

Edit: Smarter solution using Gulp

Step 1: To install Gulp. Run following command in your terminal.

npm install gulp-cli -g
npm install gulp -D

Step 2: Inside your project directory create a file named gulpfile.js. Copy the following content inside it.

var gulp        = require('gulp');
var bs          = require('browser-sync').create();   

gulp.task('serve', [], () => {
        bs.init({
            server: {
               baseDir: "./",
            },
            port: 5000,
            reloadOnRestart: true,
            browser: "google chrome"
        });
        gulp.watch('./**/*', ['', bs.reload]);
});

Step 3: Install browser sync gulp plugin. Inside the same directory where gulpfile.js is present, run the following command

npm install browser-sync gulp --save-dev

Step 4: Start the server. Inside the same directory where gulpfile.js is present, run the following command

gulp serve

edited Aug 14 '17 at 16:41

answered Feb 13 '15 at 21:25

Sushant Kr

1,953
14
19

6

Fantastic! Sandy's answer is comprehensive but your answer beats it hands down for 'make it work now' convenience. – Holf Jun 09 '15 at 19:41
1

Brilliant! No need to remember fancy routines to make CORS work! – Stoyan Berov Nov 21 '15 at 10:02
Excellent little app. Thx :) – Mark May 29 '16 at 13:22
brillilant , best and simpliest solution – firasKoubaa Aug 10 '16 at 08:01
I love simple solutions. Thanks. – Andreas L. Sep 13 '16 at 14:04
1

That link is no longer available – gbade_ Oct 13 '16 at 12:51
Would be cool to have something to test with multiple browsers, but awesome answer for a quick fix. Thank you! – Green Cell Jan 06 '17 at 02:34
very handy, standalone, portable, etc.! – Kat Lim Ruiz Jul 29 '17 at 18:21
This is awesome. There's no need to follow the above steps anymore even - you can choose a folder from the app, and the index.html in that folder will automatically be served when you browse the server URL! – mystarrocks Mar 03 '18 at 18:52
@Sushant Kr this doesn't work anymore, unfortunately. The syntax for the gulpfile in gulp 4 is now `gulp.task('serve', function() {`. – Ryan Shillington Jun 12 '19 at 21:42

Bar Horing · Answer 3 · 2021-01-31T08:07:55.567

5

To add to Alan Wells's elaborate answer here is a quick fix

Run a Local Server

you can serve any folder in your computer with Serve

First, navigate using the command line into the folder you'd like to serve.

Then

npx i -g serve
serve

or if you'd like to test Serve without downloading it

npx serve

and that's it! You can view your files at http://localhost:5000

edited Jan 31 '21 at 08:07

answered Jun 10 '19 at 16:19

Bar Horing

5,337
3
30
26

score 3 · Answer 4 · answered Apr 15 '21 at 16:42

3

If you are using vscode, you can easily start a liver server. Click liver server at the bottom of the page, once the server is started, vscode will tell the port the project is running. Do ensure your project folder is the workspace

answered Apr 15 '21 at 16:42

Akuh Innocent

51
5

score 2 · Answer 5 · edited May 23 '17 at 12:10

This error is happening because you are just opening html documents directly from the browser. To fix this you will need to serve your code from a webserver and access it on localhost. If you have Apache setup, use it to serve your files. Some IDE's have built in web servers, like JetBrains IDE's, Eclipse...

If you have Node.Js setup then you can use http-server. Just run npm install http-server -g and you will be able to use it in terminal like http-server C:\location\to\app. Kirill Fuchs

score 1 · Answer 6 · answered Sep 22 '16 at 09:41

If you use the WebStorm Javascript IDE, you can just open your project from WebStorm in your browser. WebStorm will automatically start a server and you won't get any of these errors anymore, because you are now accessing the files with the allowed/supported protocols (HTTP).

score 1 · Answer 7 · answered Jul 26 '17 at 04:24

I was facing this error while I deployed my Web API project locally and I was calling API project only with this URL given below:

localhost//myAPIProject

Since the error message says it is not http:// then I changed the URL and put a prefix http as given below and the error was gone.

http://localhost//myAPIProject

score 1 · Answer 8 · answered Sep 05 '17 at 14:30

Depends on your needs, but there is also a quick way to temporarily check your (dummy) JSON by saving your JSON on http://myjson.com. Copy the api link and paste that into your javascript code. Viola! When you want to deploy the codes, you must not forget to change that url in your codes!

XMLHttpRequest cannot load file. Cross origin requests are only supported for HTTP

8 Answers8

Here are some options that I use.

Test on Firefox, Deploy to Host

Run a Local Server

Run a Local Server with Python

Run You Web Application Locally

More advanced solutions

Run a Local Server

Linked

Related