按照需求，公司现在需要通过第三方的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模板页的更多相关文章

  1. ajax本地跨域请求以及解决方法

    什么是跨域?   我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景.所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源,只要没 ...

  2. ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  3. 【转】ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  4. 跨域请求设置withCredentials

    最近在做运动城项目,这一个项目下面有多个子项目,如主数据项目,pos项目等.主数据项目的域名为www.topmall.com,POS项目的域名为pos.topmall.com.即两个项目的主域名相同, ...

  5. chrome浏览器跨域模式设置

    做前后分离的webapp开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,好在chrome浏览器就是支持可跨域的设置,网上也有很多chrome跨域设置教程.但是新版本的chrome浏览器提 ...

  6. Fetch+SpringBoot跨域请求设置

    两种方法从SpringBoot的方向解决跨域问题 今天搭建博客的时候,尝试性的传递数据,发现浏览器报了这个错误 -blocked by CORS policy: No 'Access-Control- ...

  7. Asp.Net Core2.0允许跨域请求设置

    1.services /// <summary> /// /// </summary> /// <param name="services">& ...

  8. ASP.NET MVC 允许跨域请求设置

    场景:创建一个图片上传的站点,用于其他站点跨域上传附件和图片之类. 上传插件结合百度的 webuploader.js 经常会碰到,跨域的问题,如下, 处理方式呢,是在web.config 中配置允许跨 ...

  9. [转] Chrome - 浏览器跨域访问设置（附：新老版本两种设置方法）

    [From] http://www.hangge.com/blog/cache/detail_1703.html 在进行前后分离的 webapp 开发,或者 H5 移动 App 开发时,我们会使用 P ...

随机推荐

  1. .NET 6 优先队列 PriorityQueue 实现分析

    在最近发布的 .NET 6 中,包含了一个新的数据结构,优先队列 PriorityQueue, 实际上这个数据结构在隔壁 Java中已经存在了很多年了, 那优先队列是怎么实现的呢? 让我们来一探究竟吧 ...

  2. MySQL 报错：[Err] 1071 - Specified key was too long; max key length is 767 bytes

    [Err] 1071 - Specified key was too long; max key length is 767 bytes 这个会出现在MySQ5.7以下版本 因为没有启用innodb_ ...

  3. JAVA火星坐标系、百度坐标系、84坐标系相互转换工具类

    /** * 坐标系转换工具类 */ public class PositionUtil { public static double pi = 3.1415926535897932384626; pu ...

  4. 【LeetCode】999. Available Captures for Rook 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 四方向搜索 日期 题目地址:https://leetc ...

  5. 【LeetCode】694. Number of Distinct Islands 解题报告 (C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 DFS 日期 题目地址:https://leetcod ...

  6. 【LeetCode】49. Group Anagrams 解题报告（Python & Java & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 排序+hash 日期 题目地址:https://le ...

  7. 人脸搜索项目开源了：人脸识别(M:N)-Java版

    ​ 一.人脸检测相关概念 人脸检测(Face Detection)是检测出图像中人脸所在位置的一项技术,是人脸智能分析应用的核心组成部分,也是最基础的部分.人脸检测方法现在多种多样,常用的技术或工具大 ...

  8. The Many Faces of Robustness: A Critical Analysis of Out-of-Distribution Generalization (DeepAugment)

    目录 概 主要内容 ImageNet-R StreetView StoreFronts (SVSF) DeepFashion Remixed DeepAugment 实验结论 代码 Hendrycks ...

  9. [opencv]keypoint数据结构分析

    KeyPoint这数据结构中有如下数据成员: angle:角度,表示特征点的方向,通过Lowe大神的论文可以知道,为了保证方向不变形,SIFT算法通过对特征点周围邻域进行梯度运算,求得该点方向.-1为 ...

  10. <数据结构>XDOJ327.最短路径

    问题与解答 问题描述 求图中任意两个顶点之间的最短路径. 输入格式 输入数据第一行是一个正整数,表示图中的顶点个数n(顶点将分别按0,1,-,n-1进行编号).之后的n行每行都包含n个整数,第i行第j ...