什么是跨域
浏览器的同源策略,凡是发送请求的url的 协议、域名、端口号三者之间任意一者与当前页面地址不同的极为跨域。
JSONP
通过动态插入一个script标签。由于浏览器对script标签没有同源限制。
实际中,jsonp通常用来获取json数据,这时前后端约定一个callback。
缺点:
- 无法发送post请求
- 确定jsonp的请求是否失败并不容易,大多数框架的实现都是结合超时开判断的。
$.ajax下的jsonp
var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
+"?id=1&callback=?';
$.ajax({
url:url,
dataType:'jsonp',
processData: false,
type:'get', //jsonp 类型下只能使用GET,不能用POST,这里不写默认为GET
success:function(data){
alert(data.name);
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}});
url 中不用指定 callback 参数。对于 jQuery 中的 jsonp 来说,callback 参数是自动添加的
默认情况下,jQuery 生成的 jsonp 请求中 callback 参数是形如 callback=jQuery180099599698651582_1393992892572 这种根据看似随机的名字,对应的就是 success 那个处理函数,所以一般不用特意处理。
如果响应内容中是写死了 callback 名的话,那么可以对 jQuery 的 jsonp 指定 callback 名,如:
jQuery.ajax({
url: 'http://api.XXX.com/603/arealist_jsonp.txt',
dataType: 'jsonp',
jsonpCallback: 'CallBack',
success: function(data) {
// do what you want
}
})
$.jsonp()
var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
+"?id=1&callback=?";
$.jsonp({
"url": url,
"success": function(data) {
$("#current-group").text("当前工作组:"+data.result.name);
},
"error": function(d,msg) {
alert("Could not find user "+msg);
}
});
proxy代理
首先将请求转发给后台服务器,通过服务器来发送请求,然后将请求的结果传递给前端。
需要注意的是代理的是https协议的请求时需要信任该证书或者忽略证书检查,否则无法成功。
CORS跨域资源共享
现代浏览器支持的一种跨域资源请求方式。
当你使用XMLHttpRequest发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin,后台进行一系列处理,如果确定接受请求则在返回结果中加入一个响应头:Access-Control-Allow-Origin;浏览器判断该相应头中是否包含Origin的值,如果有则浏览器会处理响应,我们就可以拿到响应数据,如果不包含浏览器直接驳回,这时我们无法拿到响应数据。
XDR
IE8、IE9提供的一种跨域解决方案,功能支持GET和POST请求,而对于协议不同的跨域是无能为力的
document.domain
适用于不同子域的跨域技术,只需要在两个子域中设置document.domain属性为更顶级的域名(除一级域名外)。
iframe
对于现代浏览器,postMessage API还是无可撼动的。
IE6/7下,使用的是一个被认为是bug或安全漏洞的特性,即navigator对象在父窗口和iframe之间是共享的。 基于这一点,我们可以在父窗口中,在navigator对象上注册一个消息回调函数;在iframe中,调用navigator上的这个函数并传入参数。 此时可看作,iframe往父窗口的一个函数传递了一个参数,并在父窗口的上下文中执行了,那么就相当于iframe向父窗口发送了一条消息。反之亦然。
postMessage
postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。
postMessage(data,origin)方法接受两个参数
1.data:要传递的数据,html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化,在低版本IE中引用json2.js可以实现类似效果。
2.origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写,这个参数是为了安全考虑,postMessage()方法只会将message传递给指定窗口,当然如果愿意也可以建参数设置为”*”,这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为”/”。
window.onload=function(){
window.frames[0].postMessage('getcolor','http://lslib.com');
}
接收消息时,需要监听window的message事件。这样我们就可以接收任何窗口传递来的消息了,为了安全起见,我们利用这时候的MessageEvent对象判断了一下消息源.
window.addEventListener('message',function(e){
if(e.source!=window.parent) return;
var color=container.style.backgroundColor;
window.parent.postMessage(color,'*');
},false);
MessageEvent有几个重要属性:
- data:顾名思义,是传递来的message
- source:发送消息的窗口对象
- origin:发送消息窗口的源(协议+主机+端口号)
兼容性
postMessage是html5另一个API——web workers传递消息的方法目前跟localStorage一样,IE8+都支持了,只不过有些浏览器的低版本(比如FireFox4.0)并不支持。
参考资料:
1.探讨跨域请求资源的几种方式
2.html5 postMessage解决跨域、跨窗口消息传递
3.尝试使用jsonp 解决ajax 跨域解决
4. 如何解决ajax跨域问题
5. iframe跨域通信的通用解决方案-第二弹!(终极解决方案)