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/
17 answers
solution1
296 ACCPTED 2015-01-02 14:01:07
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 .
solution2
48 2015-04-30 04:31:15
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
solution3
41 2015-03-30 15:42:12
The operation is not allowed in chrome. You can either use a HTTP server(Tomcat) or you use Firefox instead.
solution4
31 2015-11-03 20:28:26
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 .
solution5
12 2015-04-14 13:47:15
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'
};
}
);
solution6
12 2015-05-12 10:48:14
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.
solution7
5 2017-08-11 05:35:49
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
solution8
3 2015-02-14 15:26:36
我想补充一点，也可以使用xampp，mamp类型的东西，并将你的项目放在htdocs文件夹中，以便在localhost上访问它
solution9
2 2016-11-15 13:03:20
If you are running server already, don't forget to use http:// in the API call. This might cause a serious trouble.
solution10
2 2017-12-15 14:36:03
- 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 . -ohttp-server . -o - Enjoy it!
solution11
1 2015-04-24 05:04:40
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.
solution12
1 2015-11-20 06:10:11
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.
solution13
1 2016-10-02 09:21:31
有一个chrome扩展200ok它是一个用于chrome的web服务器，只需添加它并选择你的文件夹
solution14
0 2016-11-02 18:40:44
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.
solution15
0 2017-03-10 04:13:25
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
solution16
0 2019-07-29 07:17:43
导航到C：/user/project/index.html，使用Visual Studio 2017打开它，文件>在浏览器中查看或按Ctrl + Shift + W
solution17
-1 2017-12-17 19:06:49
I had the same issue. after adding below code to my app.js file it fixed.
var cors = require('cors')
app.use(cors());
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.