AngularJS错误：跨起源请求只支持协议方案：HTTP，数据，镀铬的扩展，HTTPS [英] AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https
问题描述
我有一个非常简单的js角应用三个文件
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>
产品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"
}
];
})();
我尽快开始收到这个错误，因为我进入了一个使用名为productColor定制指令包括产品color.html的：
I started getting this error as soon as I entered an include of product-color.html using custom directive named productColor:
XMLHtt prequest无法加载文件：/// C：/product-color.html。跨起源请求只支持协议方案：HTTP，数据，镀铬的扩展，HTTPS，镀铬的扩展资源。
angular.js：11594错误：无法执行对XMLHtt prequest''发送'：无法加载文件：/// C：/product-color.html。
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'.
什么可能去错了吗？它是对产品color.html的路径问题？
What may be going wrong? Is it a path issue for product-color.html?
我所有的三个文件都在同一个根文件夹C：/用户/项目/
All my three files are in the same root folder C:/user/project/
推荐答案
此错误发生，因为你是刚刚从浏览器中打开HTML文件直接。为了解决这个问题，你需要从一个网络服务器为你的code和访问本地主机上。如果你有Apache的安装程序，用它来为你的文件。一些IDE的有内置的Web服务器，如JetBrains的IDE的，Eclipse的...
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...
如果您有Node.js的设置，那么你可以使用 HTTP服务器。只要运行 NPM安装HTTP服务器-g ，你将能够使用它在终端像 HTTP服务器的C：\\位置\\到\\应用。
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.
这篇关于AngularJS错误：跨起源请求只支持协议方案：HTTP，数据，镀铬的扩展，HTTPS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
