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

2017-01-07 09:10 出处:360java.com 作者:360java 评论(
编写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, ch
编写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谢谢!
分享到:
本文标签: Angular, 通过, 加载, 模板, 限制, 使用, file, 解决

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

Copyright (C) 360java 360java.com, All Rights Reserved.

苏ICP备16022210号