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   lt  DOCTYPE html gt   lt html ng-app  gemStore  gt     lt head gt       lt script src  https   ajax googleapis com ajax libs angularjs 1 3 8 angular min js  gt  lt  script gt       lt script type  text javascript  src  app js  gt  lt  script gt     lt  head gt      lt body ng-controller  StoreController as store  gt         lt div class  list-group-item  ng-repeat  product in store products  gt           lt h3 gt   product name    lt em class  pull-right  gt   product price   currency   lt  em gt  lt  h3 gt         lt  div gt      lt product-color gt  lt  product-color gt     lt  body gt   lt  html gt    product-color html   lt div class  list-group-item  gt       lt h3 gt Hello  lt em class  pull-right  gt Brother lt  em gt  lt  h3 gt   lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Navigate to C  user project index html  open it with Visual Studio 2017  File   View in Browser or press Ctrl Shift W

User · Answer

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   lt script type  text ng-template  id  tpl-productColour  gt    lt div class  list-group-item  gt       lt h3 gt Hello  lt em class  pull-right  gt Brother lt  em gt  lt  h3 gt   lt  div gt   lt  script gt    Then  in your directive   app directive  productColor   function           return             restrict   E     Element Directive             template   tpl-productColour            templateUrl   tpl-productColour

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I had the same issue  after adding below code to my app js file it fixed   var cors   require  cors   app use cors

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to javascript

Examples related to html

Examples related to angularjs

Examples related to xmlhttprequest