Chrome本地跨域请求设置，实现HTML模板页
按照需求，公司现在需要通过第三方的API反馈的数据，进行在本地就可以打开的静态页面程序(完全脱离IIS等服务器)。为了更好的维护项目，需要实现静态HTML引入HTML模板，完成ASP.NET模板页的类似功能。HTML本身并不具备该功能，只能借助于JS。因此想到了使用AngularJS的ng-include或者jQuery的load。但是完成如下测试代码后，Chrome浏览器，提示“Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.”。而火狐则可以正常使用（IE和国产浏览器由于本人不使用，因此未做测试）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
$(function () {
$("#header").load("header.html");
$("#footer").load("footer.html");
}); </script>
</head>
<body>
<div>
<h2>jQuery load 加载方式</h2>
<div id="header"></div>
<div id="context">页面内容体</div>
<div id="footer"></div>
</div>
<div ng-app="">
<h2>AngularJS ng-include 指令</h2>
<ng-include src="'header.html'"></ng-include>
<div ng-include="'footer.html'"></div>
</div> </body>
</html>
导致该错误的原因，主要是Chrome自身的安全机制，只需要在Chrome的快捷方式中配置一下即可解决该问题。通过关键词Google"配置Chrome支持本地(File协议)AJAX请求"可以找不少相关的解决方案。
Webkit内核的浏览器安全策略决定了File协议访问的应用无法使用XMLHttpRequest对象，错误消息已经明确的指出了：
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
(跨域请求仅支持协议：http, data, chrome, chrome-extension, https.)
在Chrome的快捷方式中选择属性，在“目标”中按照下图的方式进行配置，“ --allow-file-access-from-files”(复制双引号间的文字，注意最前边有一个空格)。“确定”保存后，关闭Chrome浏览器然后再次打开后，该问题就解决了(一定要重新关闭后，否则设置不会生效，刷新页面该问题并没有得到解决)。
搞定后可以正常执行：
Chrome本地跨域请求设置，实现HTML模板页的更多相关文章
- ajax本地跨域请求以及解决方法
什么是跨域? 我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景.所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源,只要没 ...
- ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...
- 【转】ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...
- 跨域请求设置withCredentials
最近在做运动城项目,这一个项目下面有多个子项目,如主数据项目,pos项目等.主数据项目的域名为www.topmall.com,POS项目的域名为pos.topmall.com.即两个项目的主域名相同, ...
- chrome浏览器跨域模式设置
做前后分离的webapp开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,好在chrome浏览器就是支持可跨域的设置,网上也有很多chrome跨域设置教程.但是新版本的chrome浏览器提 ...
- Fetch+SpringBoot跨域请求设置
两种方法从SpringBoot的方向解决跨域问题 今天搭建博客的时候,尝试性的传递数据,发现浏览器报了这个错误 -blocked by CORS policy: No 'Access-Control- ...
- Asp.Net Core2.0允许跨域请求设置
1.services /// <summary> /// /// </summary> /// <param name="services">& ...
- ASP.NET MVC 允许跨域请求设置
场景:创建一个图片上传的站点,用于其他站点跨域上传附件和图片之类. 上传插件结合百度的 webuploader.js 经常会碰到,跨域的问题,如下, 处理方式呢,是在web.config 中配置允许跨 ...
- [转] Chrome - 浏览器跨域访问设置（附：新老版本两种设置方法）
[From] http://www.hangge.com/blog/cache/detail_1703.html 在进行前后分离的 webapp 开发,或者 H5 移动 App 开发时,我们会使用 P ...
随机推荐
- 使用.NET 6开发TodoList应用文章索引
系列导航 使用.NET 6开发TodoList应用(1)--系列背景 使用.NET 6开发TodoList应用(2)--项目结构搭建 使用.NET 6开发TodoList应用(3)--引入第三方日志 ...
- IDEA设置默认maven配置
我们有时候自己在本机上配置了一个maven环境.但是IDEA每次新开一个项目都要重新选择一个maven的配置就很麻烦,可以使用这个进行设置默认的maven配置 有的版本IDEA不同显示的内容和图片的不 ...
- c++内存分布之纯虚函数
关于 本文演示环境:VS2017+32位程序. 纯虚函数是一种特殊的虚函数.可以预测到:虚函数的结论同样适用纯虚函数,但是纯虚函数是一种特殊的存在,还是看看实际结果. 代码写的不够规范: 因为任何带虚 ...
- CMake判断操作系统和编译器
判断操作系统 IF (CMAKE_SYSTEM_NAME MATCHES "Linux") ELSEIF (CMAKE_SYSTEM_NAME MATCHES "Wind ...
- 【LeetCode】120. Triangle 解题报告（Python）
[LeetCode]120. Triangle 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址htt ...
- （数据科学学习手札133）利用geopandas绘制拓扑着色地图
本文示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 我们在绘制某些地图时,为了凸显出每个独立的 ...
- Jenkins+Sonar质量门禁【实践篇-maven版】
Jenkins+Sonar质量门禁[实践篇-maven版] 配置文档百度挺多的,就不展开来了 首先很遗憾的告诉大家,maven版做不了质量门禁!只能扫描!!! 就我们公司项目里,jenkins ...
- <数据结构>XDOJ316.多点测试的写法
问题与解答 问题描述 有一棵无限大的完全二叉树,该二叉树自上而下.自左而右从1开始编号.从某一个结点到根结点(编号是1的结点)都有一条唯一的路径,比如从5到根结点的路径是(5, 2, 1),从4到根结 ...
- 使用 Eclipse 创建一个静态的登录页面
要求: 使用 Eclipse 创建一个静态的登录页面 实现步骤: 在 Eclipse 中,点击"File",显示菜单,选择"New" "Other&q ...
- Java初学者作业——分析计费规则后，编写程序输入乘坐出租车的时间和里程数，计算里程价格
返回本章节 返回作业目录 需求说明: 某城市的出租车计费规则如下: 在 7:00 - 23:00 之间,3km 以内收取起步价 10 元,超过 3km 每 km 收取 2 元. 如果不在这个时间段,在 ...