{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/
My problem was resolved just by adding
http://to my url address. for example I usedhttp://localhost:3000/moviesinstead oflocalhost:3000/movies.I had the same issue. after adding below code to my app.js file it fixed.
The operation is not allowed in chrome. You can either use a HTTP server(Tomcat) or you use Firefox instead.
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
ngTemplatedirective.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
Then, in your directive:
VERY SIMPLE FIX
In the terminal
Now, go to localhost:8000 in your browser and the page will show
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