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谢谢！