AngularJS错误：交叉原点请求仅支持协议scheme：http，data，chrome-extension，https
我有一个非常简单的angularJS应用程序的三个文件
的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的自定义指令inputproduct-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'.
什么可能出错？ 是否是product-color.html的path问题？
我所有的三个文件都在同一个根文件夹C:/user/project/
发生这个错误的原因是你直接从浏览器打开html文档。 要解决这个问题，你将需要从一个web服务器提供你的代码，并在本地主机上访问它。 如果您有Apache安装程序，请使用它来提供您的文件。 一些IDE已经内置了Web服务器，如JetBrains IDE，Eclipse …
如果你有Node.Js设置，那么你可以使用http-server 。 只要运行npm install http-server -g ，你就可以在terminal上使用它，例如http-server C:\location\to\app 。
非常简单的修复
- 转到您的应用程序目录
- 启动SimpleHTTPServer
在terminal
$ cd yourAngularApp ~/yourAngularApp $ python -m SimpleHTTPServer
现在，在浏览器中转到localhost：8000，页面将显示
这个操作在chrome中是不允许的。 您可以使用HTTP服务器（Tomcat），也可以使用Firefox。
我的问题是通过添加http://到我的url地址解决的。 例如我使用http://localhost:3000/movies而不是localhost:3000/movies 。
如果你在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等）上托pipe它，这取决于你使用哪种语言。 这将从任何浏览器工作。
如果由于某种原因，你不能从Web服务器托pipe文件，仍然需要某种加载部分的方式，你可以使用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' }; } );
我想补充一点，也可以使用xampp，mamptypes的东西，并把你的项目放在htdocs文件夹中，这样可以在localhost上访问
根本原因：
文件协议不支持Chrome的跨源请求
解决scheme1：
使用http协议而不是文件，意思是：build立一个http服务器，比如apache，或者nodejs + http-server
parsing2：
在Chrome的快捷方式目标之后添加– 允许文件访问 –使用此快捷方式打开新的浏览实例
解决scheme3：
使用Firefox来代替
原因
你不是通过像Apache这样的服务器打开页面，所以当浏览器试图获取它认为来自不同域的资源时，这是不允许的。 虽然有些浏览器确实允许。
解决scheme
运行inetmgr并在本地托pipe你的页面，浏览为http：// localhost：portnumber / PageName.html，或者通过Apache，nginx，node等web服务器。
或者使用不同的浏览器使用Firefox和Safari直接打开页面时不显示错误。 它只适用于Chrome和IE（xx）。
如果您使用的是像Brackets，Sublime或Notepad ++这样的代码编辑器，这些应用程序会自动处理这个错误。
这个问题在Firefox和Safari中不会发生。 确保您使用的是最新版本的xml2json.js。 因为我遇到了IE中的XMLparsing器错误。 在Chrome最好的方式，你应该像在Apache或XAMPP服务器中打开它。
有一个铬扩展200ok其网页服务器铬只是添加，并select您的文件夹
如果您已经在运行服务器，请不要忘记在API调用中使用http：// 。 这可能会导致严重的麻烦。
你必须使用下面的标志打开chrome进入运行菜单并input“chrome –disable-web-security –user-data-dir”
在使用该标志打开chrome之前，请确保所有的chrome实例都已closures。 您将收到一条安全警告，指示CORS已启用。
添加到@Kirill Fuchs优秀的解决scheme，并回答@ StackUser的疑问 – 启动http服务器，设置path，直到只有应用程序文件夹，直到html页！ http-server C:\location\to\app并访问app文件夹下的index.html
