Angular通过XHR加载模板而限制使用file://,解决方案

编写angular项目时,遇到此困难:

angular.js:12011 XMLHttpRequest cannot load file:///E:/angular/imooc/chapter2/bookstore/app/tpls/hello.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

分析:

因为许多浏览器(包括chrome、opera)限制使用XHR时调用file://协议。

而AngularJS的模板tpl通过XHR下载,而使用本地打开(file://,即直接打开网页),就会导致以上错误。

对于该问题,有3种解决方案:

①使用Web服务器运行你的项目(有像很多简单的解决办法https://code.google.com/p/mongoose/或几行的node.js脚本)。

②使用index.html文件嵌入模板<script>指令:参考网址http://docs.angularjs.org/api/ng.directive:script,所以模板不再需要通过XHR加载。

③更改浏览器设置为允许XHR调用过file://协议。例如,这可以在Chrome中完成,像这样:允许谷歌Chrome浏览器使用XMLHttpRequest从本地文件加载URL,推荐方式为"chrome.exe --allow-file-access-from-files"(在命令行中先进入chrome.exe的目录,再执行此命令)。(参考网址:http://stackoverflow.com/questions/4819060/allow-google-chrome-to-use-xmlhttprequest-to-load-a-url-from-a-local-file

我自己试了方案③,还是行不通,最终采用方案①中的node,安装http-server(轻量级server),在项目目录下,命令行运行启动http-server,则项目下的文件都可以在服务器上跑,这样angular通过XHR加载模板时,调用的是http协议,打开网页就不会出现上述错误了。

可能讲得不太清晰,如有写得不好的,欢迎吐槽留言提问,有更好的解决方案欢迎共享,O(∩_∩)O谢谢!