{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 听够珍惜 的问题《AngularJS Error: Cross origin requests are only su》','https://www.manongdao.com/q-11258.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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/
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\appand accessindex.htmlunderappfolderI 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
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.
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.
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
cmdwith 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.