在前端的JS请求中,跨域的问题经常存在,根据不同的实现原理,常见的跨域的方法如下:
一:前端的方式
1:在前端页面中,可以直接引用跨域资源的标签有三个,分别是img的src,style的href和script的src。这三个都可以直接引用外域的资源。
在img和style的请求中,可以直接通过请求的地址加后缀参数进行参数传递,但是没有接受服务器返回的操作。
在script的src可以通过和服务器端的配合实现数据的传递与返回,稍后讨论
2:其他前端的跨域方式
2.1:document.domain方式,同源策略,在考虑跨域问题的时候,如果两个页面拥有相同的主域但是子域不同,则可以通过document.domain的修改实现两者相同域的实现。在修改的时候注意只能修改为与当前相同的域或者父级的域。而且必须是一个符合格式的domain。
2.2:window.name跨域
window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。
比如有一个www.domain1.com/receive.html页面,需要通过receive.html页面里的js来获取另一个位于不同域上的页面www.domain2.com/data.html里的数据。
data.html页面里的代码很简单,就是给当前的window.name设置一个receive.html页面想要得到的数据值。data.html里的代码:
window.name="I am the data";
那么在receive.html页面中,我们怎么把data.html页面载入进来呢?显然我们不能直接在a.html页面中通过改变window.location来载入data.html页面,因为我们想要即使receive.html页面不跳转也能得到data.html里的数据。答案就是在receive.html页面中使用一个隐藏的iframe来充当一个中间人角色,由iframe去获取data.html的数据,然后a.html再去得到iframe获取到的数据。
充当中间人的iframe想要获取到data.html的通过window.name设置的数据,只需要把这个iframe的src设为www.domain2.com/data.html就行了。然后a.html想要得到iframe所获取到的数据,也就是想要得到iframe的window.name的值,还必须把这个iframe的src设成跟receive.html页面同一个域才行,不然根据前面讲的同源策略,receive.html是不能访问到iframe里的window.name属性的。这就是整个跨域过程。
2.3:postMessage
postMessage是Html5新增的处理跨域问题的API,postMessage(data,origin)接受两个参数。
1.data:要传递的数据,html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化,在低版本IE中引用json2.js可以实现类似效果。
2.origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写,这个参数是为了安全考虑,postMessage()方法只会将message传递给指定窗口,当然如果愿意也可以建参数设置为"*",这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。
操作示例:
<div>
<div id="color">Frame Color</div>
</div>
<div>
<iframe id="child" src="http://domain2.com/test.html"></iframe>
</div>
在domain1中通过如下方法调用postMessage接口
window.onload=function(){
window.frames[0].postMessage('getcolor','http://lslib.com');
}
接受的时候监听Window的message事件:
window.addEventListener('message',function(e){
if(e.source!=window.parent) return;
var color=e.data;
console.log(e.data);
}
二:后端的方式
在后端处理的过程中,服务器通过Access-Control-Allow-Origin可以设置那些域可以访问当前资源,如果要开放给所有的域访问,则直接设置为*即可。
优点是浏览器端不用考虑同源策略的限制,缺点就是增加服务器的负担,且访问速度慢。
三:前后端的方式
这里涉及到的就是我们经常说道的JSONP的方式,JSONP是通过前后端配合的方式实现跨域的实现,前端采用的是基于Script的实现,通过动态的创建script标签,将要请求数据的参数和回调函数写在src 的参数中。服务器收到请求之后,按照对应的参数和回调函数返回对应的结果,
示例如下:
假如当前我们的网站www.our.com想获取12306的某一辆车的余票情况,我们客户端如下构造:
function getInfoCallback(data){
console.log(data);
}
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src="http://www.12306.com/getLeftTicket?id=k58&callback=getInfoCallback;
然后12306那边按照我们传递的参数和回调函数返回如下的script内容:
getInfoCallback({
id: "k58",
left: 123
})
当script收到返回的内容相当于直接调用当前页面的函数,以此可以达到跨域的功能。