AngularJS错误:仅支持协议方案的跨源请求:http,数据,chrome扩展,https
use*_*637 126 html javascript xmlhttprequest angularjs
我有三个非常简单的角度js应用程序的文件
的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的自定义指令输入product-color.html的include,我就开始收到此错误:
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'.
可能出现什么问题？这是product-color.html的路径问题吗？
我的三个文件都在同一个根文件夹中 C:/user/project/
Kir*_*chs 299
发生此错误是因为您只是直接从浏览器打开html文档.要解决此问题,您需要从Web服务器提供代码并在localhost上访问它.如果您有Apache安装程序,请使用它来提供文件.有些IDE内置了Web服务器,比如JetBrains IDE,Eclipse ......
如果你有Node.Js设置,那么你可以使用http-server.只需运行npm install http-server -g,您就可以在终端中使用它http-server C:\location\to\app.
- 优秀解决方案 (6认同)
- http服务器是我见过的最简单的本地托管方式.注意:如果您在Windows上没有npm,只需安装node.js,它就会在cmd中可用. (3认同)
- 如果它发生在android的webview中,我该怎么办!？ (3认同)
- @reddy简单明了:浏览器直接在您的计算机上访问文件系统是一个安全问题. (3认同)
- 出于好奇,为什么不能只在网络浏览器中打开文件？ (2认同)
Chi*_*rag 48
非常简单的修复
- 转到您的app目录
- 启动SimpleHTTPServer
在终端
$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer
现在,在浏览器中转到localhost:8000,页面将显示
- 在Python 3中,它应该是`python -m http.server`. (8认同)
dan*_*iel 41
chrome中不允许该操作.您可以使用HTTP服务器(Tomcat),也可以使用Firefox.
- 我在我的情况下使用了firefox而且它有效.Chrome有更高的安全性吗？为什么我被允许这样做.... (4认同)
Tej*_*sad 13
如果您在chrome/chromium浏览器中使用它(例如:在Ubuntu 14.04中),您可以使用以下命令之一来解决此问题.
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
这将允许您以铬或铬加载文件.如果必须对Windows执行相同的操作,可以在Chrome快捷方式的属性中添加此开关,或者cmd使用标志运行它.默认情况下,Chrome,Opera,Internet Explorer中不允许执行此操作.默认情况下,它仅适用于firefox和safari.因此使用此命令将帮助您.
或者,您也可以根据您熟悉的语言在任何Web服务器上托管它(例如:Tomcat-java,NodeJS-JS,Tornado-Python等).这适用于任何浏览器.
lin*_*k64 12
如果由于某种原因您无法从Web服务器托管文件并仍然需要某种方式加载部分,您可以使用该ngTemplate指令.
这样,您可以在index.html文件中的脚本标记中包含标记,而不必将标记作为实际指令的一部分.
将其添加到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>
然后,在你的指令中:
app.directive('productColor', function() {
return {
restrict: 'E', //Element Directive
//template: 'tpl-productColour'
templateUrl: 'tpl-productColour'
};
}
);
根本原因:
文件协议不支持Chrome的交叉源请求
解决方案1:
使用http协议而不是文件,意思是:设置一个http服务器,如apache,或nodejs + http-server
Sotution 2:
在Chrome的快捷方式目标后添加--allow-file-access-from-files,并使用此快捷方式打开新的浏览实例
解决方案3:
请改用Firefox
- 安装http-server，运行命令
npm install http-server -g - 在 index.html 所在的路径中打开终端
- 运行命令
http-server . -o - 好好享受！