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

相关文章