作为一名前端开发工程师,我们在开发中经常会遇到跨域这个问题。今天想从跨域的原理说起,接着到解决方案,最后到框架对跨域的封装。


跨域指的是在URL访问地址中的协议、域名、端口任意一个不同,都被称为跨域访问。

先对一个URL进行部分的拆分:

a javascript error occurred有哪些_json

如果单独针对前端不涉及服务器,那么是无法处理端口、协议不同的情况,要解决这种情况,必须涉及到服务器,使用代理等方法,后面会简单讲解一下。


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标签引用:

function callbackData(jsondata){}

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地址中的主域、父域的了解请自行百度,网上很多相关的文章。



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’} 
 }
}