AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https

Question

I have three files of a very simple angular js application

index.html

<!DOCTYPE html>
<html ng-app="gemStore">
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js'></script>
    <script type="text/javascript" src="app.js"></script>
  </head>

  <body ng-controller="StoreController as store">
      <div class="list-group-item" ng-repeat="product in store.products">
        <h3>{{product.name}} <em class="pull-right">{{product.price | currency}}</em></h3>
      </div>

  <product-color></product-color>
  </body>
</html>

product-color.html

<div class="list-group-item">
    <h3>Hello <em class="pull-right">Brother</em></h3>
</div>

app.js

(function() {
  var app = angular.module('gemStore', []);

  app.controller('StoreController', function($http){
              this.products = gem;
          }
  );

  app.directive('productColor', function() {
      return {
          restrict: 'E', //Element Directive
          templateUrl: 'product-color.html'
      };
   }
  );

  var gem = [
              {
                  name: "Shirt",
                  price: 23.11,
                  color: "Blue"
              },
              {
                  name: "Jeans",
                  price: 5.09,
                  color: "Red"
              }
  ];

})();

I started getting this error as soon as I entered an include of product-color.html using custom directive named productColor:

XMLHttpRequest cannot load file:///C:/product-color.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
angular.js:11594 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/product-color.html'.

What may be going wrong? Is it a path issue for product-color.html?

All my three files are in the same root folder C:/user/project/

Just a quick pointer that if you do something stupid, such as in my case I accidentally appended the TLD to the port: "http://localhost:8070.com" then you will receive the same error. Check what URL you're attempting to resolve! — Wildhoney, Jul 31 '15 at 14:25
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:34
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

score 308 · Accepted Answer · edited Apr 01 '16 at 14:21

308

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.

edited Apr 01 '16 at 14:21

Tadas Šukys

4,140
4
27
32

answered Jan 02 '15 at 14:01

Kirill Fuchs

13,446
4
42
72

3

The http-server is the simplest way I've seen of hosting locally. Note: If you don't have npm on windows, just install node.js and it'll become available in cmd. – Octane Mar 11 '15 at 21:19
3

And if it's happened in webview in android, what should i do!? – Dr.jacky Jun 30 '15 at 10:36
Perfect... it was opened in the browser but as soon as I opened it with mamp it worked. Thanks – Omar Jul 06 '15 at 15:03
Thank you. Anyway, I go in the folder where there are my html and js files to be runned, so I run "http-server index.html". At this point, cmd says: Starting up http-server, serving index.html Available on: http://192.168.1.8:8080 etc... If I put in the url: "http://192.168.1.8:8080" in the browser downloades something...if I open it with the browser, I can't see the correct page... – StackUser Sep 27 '15 at 14:03
I use my Angular APP with electron. How can i launch server – Sergey Romanov Oct 19 '15 at 19:45
2

Out of curiosity, why isn't it possible to just open the files in the web browser ? – tobiak777 Jan 14 '16 at 13:43
@UtenteStack I have the same problem, please help as I tried the above solution but it did not work – HamsterRoll Jan 28 '16 at 06:28
To extend this solution: If you have node setup up and would like to serve with live-reload you can use [link](https://www.npmjs.com/package/live-server) – Alex J Feb 18 '16 at 04:36
3

@reddy Plain and simple: It is a security issue for the browser to access the filesystem directly on your computer. – Alex J Feb 18 '16 at 04:37
1

Mr.Hyde you can use: WebSettings settings = _webView.getSettings(); settings.setAllowFileAccessFromFileURLs(true); settings.setAllowUniversalAccessFromFileURLs(true); in case of Android webview – Anisetti Nagendra May 05 '16 at 12:17
@AlexJ I understand its a security issue, but how come firefox and safari browsers are allowing it? – Prahlad Yeri May 30 '17 at 10:01
Doesn't work for me. it gives me a local http://127.0.0.1:8080 address that just downloads a file when I point to it in Chrome. Using Firefox solved it for me – SeanMC Feb 15 '18 at 20:17

score 50 · Answer 2 · answered Apr 30 '15 at 04:31

50

VERY SIMPLE FIX

Go to your app directory
Start SimpleHTTPServer

In the terminal

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

Now, go to localhost:8000 in your browser and the page will show

answered Apr 30 '15 at 04:31

Chirag

967
8
15

8

In Python 3, it should be `python -m http.server`. – Luan Nico Jul 01 '15 at 16:25
1

This helped out a lot! Great solution. – mirta May 04 '17 at 12:50

score 42 · Answer 3 · edited Apr 21 '15 at 07:05

42

The operation is not allowed in chrome. You can either use a HTTP server(Tomcat) or you use Firefox instead.

edited Apr 21 '15 at 07:05

Arepalli Praveenkumar

1,247
1
13
27

answered Mar 30 '15 at 15:42

daniel

545
6
11

4

I used firefox instead in my situation and it works. Does Chrome have more security that Firefox ? Why am I allowed to do this .... – thatOneGuy Sep 16 '15 at 15:44
That's the best answer for me. – Thomas Oct 30 '15 at 17:16
1

Short and Simple...Worked! – viks Jan 29 '16 at 11:07
really helped me too. – Ram Dutt Shukla May 24 '16 at 08:22
1

Hey..thanks a lot.. your answer was such a big help...saved so much of my time – Megha Jul 30 '16 at 13:57

score 32 · Answer 4 · answered Nov 03 '15 at 20:28

32

My problem was resolved just by adding http:// to my url address. for example I used http://localhost:3000/movies instead of localhost:3000/movies.

answered Nov 03 '15 at 20:28

Ali Sepehri.Kh

2,468
2
18
27

Tejus Prasad · Answer 5 · 2015-05-12T12:28:30.277

If you are using this in chrome/chromium browser(ex: in Ubuntu 14.04), You can use one of the below command to tackle this issue.

ThinkPad-T430:~$ google-chrome --allow-file-access-from-files
ThinkPad-T430:~$ google-chrome --allow-file-access-from-files fileName.html

ThinkPad-T430:~$ chromium-browser --allow-file-access-from-files
ThinkPad-T430:~$ chromium-browser --allow-file-access-from-files fileName.html

This will allow you to load the file in chrome or chromium. If you have to do the same operation for windows you can add this switch in properties of the chrome shortcut or run it from cmd with the flag. This operation is not allowed in Chrome, Opera, Internet Explorer by default. By default it works only in firefox and safari. Hence using this command will help you.

Alternately you can also host it on any web server (Example:Tomcat-java,NodeJS-JS,Tornado-Python, etc) based on what language you are comfortable with. This will work from any browser.

score 12 · Answer 6 · edited Jul 10 '15 at 07:33

If for whatever reason you cannot have the files hosted from a webserver and still need some sort of way of loading partials, you can resort to using the ngTemplate directive.

This way, you can include your markup inside script tags in your index.html file and not have to include the markup as part of the actual directive.

Add this to your index.html

<script type='text/ng-template' id='tpl-productColour'>
 <div class="list-group-item">
    <h3>Hello <em class="pull-right">Brother</em></h3>
</div>
</script>

Then, in your directive:

app.directive('productColor', function() {
      return {
          restrict: 'E', //Element Directive
          //template: 'tpl-productColour'
          templateUrl: 'tpl-productColour'
      };
   }
  );

As I have already edited this post use templateUrl : 'tpl-productColor' — HANU, Jul 10 '15 at 06:38

score 6 · Answer 7 · answered Aug 11 '17 at 05:35

6

RootCause:

File protocol does not support cross origin request for Chrome

Solution 1:

use http protocol instead of file, meaning: set up a http server, such as apache, or nodejs+http-server

Sotution 2:

Add --allow-file-access-from-files after Chrome`s shortcut target, and open new browse instance using this shortcut

Solution 3:

use Firefox instead

answered Aug 11 '17 at 05:35

Timothy.Li

1,011
9
10

Using Firefox helped me – Vineeth Aug 20 '17 at 02:31

score 5 · Answer 8 · answered Dec 15 '17 at 14:36

5

Install the http-server, running command npm install http-server -g
Open the terminal in the path where is located the index.html
Run command http-server . -o
Enjoy it!

answered Dec 15 '17 at 14:36

Michael Horta Fleitas

101
2
4

score 4 · Answer 9 · answered Feb 14 '15 at 15:26

4

I would add that one can also use xampp, mamp type of things and put your project in the htdocs folder so it is accessible on localhost

answered Feb 14 '15 at 15:26

bullettrain

958
1
9
17

score 2 · Answer 10 · answered Nov 15 '16 at 13:03

2

If you are running server already, don't forget to use http:// in the API call. This might cause a serious trouble.

answered Nov 15 '16 at 13:03

Edison D'souza

4,551
5
28
39

Thanks man, two hours looking for solution to same problem and was this... – santillanix Apr 12 '17 at 17:19
Welcome bro. Happy Coding :) – Edison D'souza Apr 13 '17 at 09:33

score 1 · Answer 11 · answered Apr 24 '15 at 05:04

The Reason

You are not opening the page through a server, like Apache, so when the browser tries to obtain the resource it thinks it is from a separate domain, which is not allowed. Though some browsers do allow it.

The Solution

Run inetmgr and host your page locally and browse as http://localhost:portnumber/PageName.html or through a web server like Apache, nginx, node etc.

Alternatively use a different browser No error was shown when directly opening the page using Firefox and Safari. It comes only for Chrome and IE(xx).

If you are using code editors like Brackets, Sublime or Notepad++, those apps handle this error automatically.

score 1 · Answer 12 · answered Nov 20 '15 at 06:10

1

This issue is not happening in Firefox and Safari. Make sure you are using the latest version of xml2json.js. Because i faced the XML parser error in IE. In Chrome best way you should open it in server like Apache or XAMPP.

answered Nov 20 '15 at 06:10

Shantha Moorthy K

5
6

score 1 · Answer 13 · answered Oct 02 '16 at 09:21

1

there is a chrome extension 200ok its a web server for chrome just add that and select your folder

answered Oct 02 '16 at 09:21

gaurav moolani

39
6

Excellent solution – Mohamed Adel Dec 22 '16 at 21:51

score 0 · Answer 14 · answered Nov 02 '16 at 18:40

You have to open chrome using the following flag Go to run menu and type "chrome --disable-web-security --user-data-dir"

Make sure all the instances of chrome are closed before you use the flag to open chrome. You will get a security warning that indicates CORS is enabled.

score 0 · Answer 15 · answered Mar 10 '17 at 04:13

0

Adding to @Kirill Fuchs excellent solution and answering @StackUser's doubt - while starting the http-server, set the path till the app folder only, NOT till the html page! http-server C:\location\to\app and access index.html under app folder

answered Mar 10 '17 at 04:13

Tejaswini

56
7

score 0 · Answer 16 · answered Jul 29 '19 at 07:17

0

Navigate to C:/user/project/index.html, open it with Visual Studio 2017, File > View in Browser or press Ctrl+Shift+W

answered Jul 29 '19 at 07:17

etoricky

631
1
7
10

score -1 · Answer 17 · answered Dec 17 '17 at 19:06

-1

I had the same issue. after adding below code to my app.js file it fixed.

var cors = require('cors')
app.use(cors());

answered Dec 17 '17 at 19:06

Surendra Babu Parchuru

968
1
11
18

AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https

17 Answers17

Linked

Related