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

转载于:https://www.cnblogs.com/JennyLin77/p/6031062.html

Angular通过XHR加载模板而限制使用file://（解决方案）相关推荐

Spring Boot和Thymeleaf：重新加载模板和静态资源，而无需重新启动应用程序
Thymeleaf是围绕自然模板的概念设计的,该模板允许进行静态原型制作:模板逻辑不会影响用作原型的模板. 尽管这是一项很棒的技术,但您可能还希望在运行的Spring Boot应用程序中查看结果,而不 ...
Freemarker提供了3种加载模板目录的方法
Freemarker提供了3种加载模板目录的方法. 它使用Configuration类加载模板. 三种方法分别是: public void setClassForTemplateLoading(Cla ...
angular单个页面加载多个ng-app
一般angular单个页面只能加载一个ng-app,一个页面会自动加载第一个ng-app,其它ng-app不会被加载.如果想加载多个ng-app就需要使用angular.bootstrap去加载后面的 ...
Lodop 动态加载模板，动态加载数据
最近需要使用Lodop打印控件,所以就研究了一下,期间从网上找了诸多的东西,基本全是对HTML进行打印的,没有找到我想要的,就只好自己动手,丰衣足食. 这篇文章主要讲述的是Lodop与数据的结合使用, ...
Angular(4)中加载Arcgis for JavaScript地图
背景近期我司项目的需要,采用Angular(4)+SpringBoot前后端分离的架构.并且在需要在项目中实现Arcgis地图. 本人之前有过Arcgis for JavaScript的小小填坑经验 ...
freemarker加载模板的三种方法
过了几天再看这篇文章感觉自己写的也太不走心的,本渣渣决定好好解释一下(￣▽￣)" 加载模板的三种方法我觉得下面那个连接中大家都可以看懂我就之所以下模板的流程吧先建一个word文档根据画出你 ...
vue的动态组件和v-for结合实现按数据动态加载模板
假设有一个需求,后台把矩形数据和圆的数据放在一起组成列表传给前端,前端根据数据不同加载不同的模板. 数据格式: shapeList:[{type:'rect',info:{height:10,widt ...
Unity无法创建新项目，UnityHub无法加载模板
说明 Unity版本 Unity Hub版本:3.1.1-c1 系统版本:Win 10专业版 1909 内存:32G UnityHub无法加载模板这时候输入项目名称,选择位置之后,创建项目,会提示检 ...
命令行下运行 java someClass.class出现 “错误：找不到或无法加载主类someClass ” 的解决方案
命令行下运行 java someClass.class出现 "错误:找不到或无法加载主类someClass " 的解决方案参考文章: (1)命令行下运行 java someCla ...

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

Angular通过XHR加载模板而限制使用file://（解决方案）相关推荐

最新文章

热门文章