自从前后端开发实现了越来越彻底的分离，开发中遇到的跨域问题也随之越来越多；
而无论是跨域请求JSONP，CORS或者window跨域window.name，window.postMessage，在实际开发使用中的表现都不够完美。
相对来说 CORS 是官方的功能比较完善的方案，但除了需要服务器和浏览器双方同时支持外，还有很多限制，比如Access-Control-Allow-Origin:*不能发送cookie等，而且如果服务器设置不当也存在着一些安全隐患。
当然，我写这篇的重点不是吐槽，而且解决问题的。
更多关于跨域的资料请自行查阅，相关内容
<h4 id="design"> 设计</h4>
我并不是一个前端开发，在之前的很长时间里我都在做着后端开发的工作；
一个偶然的机会接触到了angularJS的前端路由，当时我就想到了一个点子——做一个index.html页面，这个页面只有一段js脚本，脚本的功能是将另外一个存放于静态存储服务器的html页面整个拉过来，写到当前页面中。
举个栗子
比如我有一个服务器是这样的：
api服务站点：www.xxx.com
静态存储服务：static.xxx.com
登录页面：static.xxx.com/20170420/login.html (中间的数字表示版本，下面会讲到)
登录接口：www.xxx.com/api/user/login
index.html
很显然，在登录页面调用登录接口是一个跨域的行为；
所以我现在在www.xxx.com中放一个index.html页面
内容如下：
<script src="//static.xxx.com/config.js"></script>
<script>
(function (url) {
if (/[?&]supportreload\b/i.test(location.search)) {
window.loadPage = arguments.callee;
}
if (url) {
var xhr = window.XMLHttpRequest ?
new XMLHttpRequest() :
new ActiveXObject('Microsoft.XMLHTTP');
url += [(url.indexOf("?") < 0 ? "?" : "&"), "_", new Date().getTime()].join("");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
var base = ['<base href="', url, '" />'].join("");
var html = xhr.responseText;
html = html.replace(/(\<head[^>]*\>)/, "$1" + base);
if (html === xhr.responseText) {
html = base + html;
}
document.open();
document.write(html);
document.close();
} else {
document.write("'" + url + "' 加载失败(" + xhr.statusText + ")...");
}
}
}
xhr.open("GET", url, true);
xhr.send(null);
}
})(window["index.page"]);
</script>
其中引入了一个//static.xxx.com/config.js，内容如下：
window["index.page"] = "//static.xxx.com/20170420/login.html"
流程
流程大致是这样的
可以看到，在index.html页面被加载的同时，我引用了一个config.js，这个js也是存放在静态资源服务器的，里面声明了一个参数
window["index.page"]，而index.html页面会用这个变量中声明的url拉取页面，并write到当前页面中。
发布版本控制
可以看到导入的页面是"//static.xxx.com/20170420/login.html"，中间的数字可以看做是版本，前端每次发布都可以创建一个新的文件夹，保留之前的发布内容，如果遇到问题需要回滚之类的操作，只需要将config.js中的window["index.page"]指向新的版本页面即可；
页内资源
另外页面中的css，js等资源的问题，我在load page操作的时候会在页面中加入<base >标签，保证大部分的相对引用资源都是没问题的（js代码中的地址不受base影响，如ajax）；
本地调试
为了方便本地调试，特别加了这一段
if (/[?&]supportreload\b/i.test(location.search)) {
window.loadPage = arguments.callee;
}
当访问 “www.xxx.com/index.html?supportreload”的时候，会注册一个全局方法window.loadPage，可以load本地调试页面，如：
window.loadPage("localhost:8080/login.html");
页面跳转
目前页面跳转有2个方案：
-
前端处理
前端使用angularjs的路由方式，使用hash切换页面，首页永远不变；
这种方式对前端有一定要求，后端代码不需要任何修改；
-
后端处理
后端使用url重写功能，将一个固定路径的所有子路径全部映射到index.html，如：
config.Routes.MapHttpRoute(
name: "webhtml",
routeTemplate: "web/{*pattern}",
defaults: new { controller = "webhtml", action = "index" }
);
前端使用相对路径的方式切换页面，config.js部分代码做一些简单的调整；
如：
window["index.page"] = "//static.xxx.com/20170420" + location.pathname
现在就可以动态拉取页面了，比如访问
www.xxx.com/web/login.html的时候，会拉取并展示"//static.xxx.com/20170420/login.html"
www.xxx.com/web/user/manager/info.html的时候，会拉取并展示"//static.xxx.com/20170420/user/manager/info.html"
