作为一名前端开发工程师，我们在开发中经常会遇到跨域这个问题。今天想从跨域的原理说起，接着到解决方案，最后到框架对跨域的封装。
跨域指的是在URL访问地址中的协议、域名、端口任意一个不同，都被称为跨域访问。
先对一个URL进行部分的拆分：
如果单独针对前端不涉及服务器，那么是无法处理端口、协议不同的情况，要解决这种情况，必须涉及到服务器，使用代理等方法，后面会简单讲解一下。
CORS（Cross-Origin Resource Sharing 跨域资源共享）
大家最经常使用的跨域解决方案是：CORS（Cross-Origin Resource Sharing 跨域资源共享）
CORS解决跨域的方法是使用XMLHttpRequest对象，有使用过Ajax的同学应该是相当清楚的。不懂的同学，可以自行百度一下，或者迟点我找一下我以前的笔记，再弄成一篇简单的文章。
注意:需要前后端统一http的请求头。
使用post方式进行Ajax请求
var xhr = new XMLHttpRequest();
xhr.open(“post”,”url”,”true”);
//post方式需要自己设置http的请求头
xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
//post发送数据
xhr.send(“name”+uaername);
CORS和Ajax的方法几乎一样，不同的是在使用open方法上。
ajax:
使用的是相对路径：xhr.open('get','/abc',true);
CORS:
使用的是完整URL路径：xhr.open('get','https://api.douban.com/v2/movie/top250?count=10',true)
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。
jsonp跨域
jsonp优点：不是太受同源策略的限制，大多数浏览器都支持，兼容性好。
jsonp缺点：只支持get请求，不支持POST请求，不能解决不同域的两个页面之间进行js调用问题。
jsonp是运用src请求不同域，执行回调函数（可带返回数据），这也是我们用script标签可以调用cdn上的脚本的一个原因。再说回XMLHttpRequest，这种方式是无法请求得到不同域上的数据的。
1、普通的脚本script标签引用：
<script>
function callbackData(jsondata){}
</script>
<script src='http://abc.com/abc.html?callback=callbackData'></script>
2、jquery请求jsonp:
$.ajax({
url:'http://abc.com/abc.html',
dataType:'jsonp',
jsonp:'jsonpcallback',
success:function(data){
//处理返回函数
}
})
3、vue-resource请求jsonp:
this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10',{},
{
headers:{ },
emulateJSON: true
}).then(
function(response) {
// 这里是处理正确的回调
},function(response) {
// 这里是处理错误的回调
});
4、开发者自己封装一个jsonp，只简单说一下思路：
其实就是用js代码动态创建一个script标签
5、vue-axios是不支持jsonp
document.domain跨子域（主域相同）
在前端开发中，不同域的文件是不可直接调用使用的，但可以相互获取到window对象，不过获取到的window对象，却无法直接在不同域中使用其中的属性和方法。
每个域中都有一个document.domain属性，只要我们在各自的域中设置document.domain统一一致，就可以实现跨域调用了。设置document.domain时，必须设置成自身或更高级的父域，且主域必须相同，对于url地址中的主域、父域的了解请自行百度，网上很多相关的文章。
http://www.abc.com/a.html 与 http://abc.com/b.html 是同一主域：abc.com
window.name
在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。但window.name是一个字符串值。我们在使用它时要懂得对字符串进行解释。
window.name 的缺点：1、我们虽然可以通过类似iframe这种形式来获取异域的数据，但还是得在访问后把src设置成同源地址。2、把我们需要的数据放在一个共享的window.name属性上，使开发变得麻烦、不友好、安全问题严重。所以这种方法得不到开发者们的认可。
使用HTML5的window.postMessage方法跨域
window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 * 。
需要接收消息的window对象，可是通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。
vue-proxytable服务器代理跨域
我们在使用vue开发时，如果使用的是vue-cli脚手架webpack开发模板时，我们可以在生成的项目中找到文件夹名为config，这个文件是与webpack配置相关，其中包括使用nodejs生成的服务器，在该文件夹下可以找到index.js文件，这个文件就是webpack的最基本配置，proxytable就在这个文件里面。
vue-proxytable是使用服务器代理来实现跨域的，对于服务器代理，我不做详细的解析，感兴趣的同学可以自行百度。其中想深入了解的vue-proxytable的同学可以了解http-proxy-middleware。
proxytable的大概配置：
proxyTable:{
'/list'://url输入的相对路径
{
target:'http://api.xxxxxxxx.com',//实际映射到的目标地址
changeOrigin:true,//TRUE为本地虚拟服务器来接收、发送请求
pathRewrite: {'^/list':'/list'}
}
}
网友评论