跨域常见解决方案
2017-08-20 本文已影响0人
yujiawei007
一、设置 document.domain
原理:相同主域名下不同子域页面,通过设置document.domain让他们同域;
限制:此方法只适用与跨子域的,对于跨父域名,仍然不可行,且需要载入iframe页面。
domain 属性可返回下载当前文档的服务器域名。
二、jsonp
原理:<script>是可以跨域的,而且在跨域脚本中可以直接回调当前脚本的函数。
限制:需要创建一个DOM对象并且添加到DOM树,只能用于GET方法
三、navigation 对象
原理:iframe之间是共享navigator对象的,用它来传递信息
要求:IE6/7
有些人注意到了IE6/7的一个漏洞:iframe之间的window.navigator对象是共享的。 我们可以把它作 为一个Messenger,通过它来传递信息。比如一个简单的委托:
四、window.postMessage
原理:HTML5允许窗口之间发送消息
限制:浏览器需要支持HTML5,获取窗口句柄后才能相互通信
这是一个安全的跨域通信方法,postMessage(message,targetOrigin)也是HTML5引入的特性。 可以给任何一个window发送消息,不论是否同源。第二个参数可以是*但如果你设置了一个URL但不 相符,那么该事件不会被分发。看一个普通的使用方式吧:
// URL: http://bentos.com/foo
var win = window.open('http://b.com/bar');
win.postMessage('Hello, bar!', 'http://b.com');
// URL: http://baidu.com/bar
window.addEventListener('message',function(event) {
console.log(event.data);
});
五、跨域资源共享(CORS)
原理:服务器设置Access-Control-Allow-OriginHTTP响应头之后,浏览器将会允许跨域请求
限制:浏览器需要支持HTML5,可以支持POST,PUT等方法
六. WebSocket
WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很棒的实现。
我们先简单看下webSocket在客户端上的api:
var ws = new WebSocket('ws://127.0.0.1:8080/url'); //新建一个WebSocket对象,注意服务器端的协议必须为“ws://”或“wss://”,其中ws开头是普通的websocket连接,wss是安全的websocket连接,类似于https。
ws.onopen = function() {
// 连接被打开时调用
};
ws.onerror = function(e) {
// 在出现错误时调用,例如在连接断掉时
};
ws.onclose = function() {
// 在连接被关闭时调用
};
ws.onmessage = function(msg) {
// 在服务器端向客户端发送消息时调用
// msg.data包含了消息
};
// 这里是如何给服务器端发送一些数据
ws.send('some data');
// 关闭套接口
ws.close();