跨域的几种方式

跨域的几种方式

• CROS
• 图像Ping
• JOSNP
• Comet
• Web Sockets
• HTML5 postMessage

CROS(Cross-Origin Resource Sharing): 跨域资源共享

原理是自定义HTTP头部Origin，这个部分由浏览器控制,这个过程与cookie无关。
例如：Origin: http://www.abc.com

服务器判读Origin的值是否在自己白名单当中，如果是，返回Access-Control-Allow-Origin: "http://www.abc.com"

当访问服务器的资源为公共资源时，也就是服务器不限制请求来源时，返回Access-Control-Allow-Origin: "*"

图像Ping

原理是创建一个实例，设置src进行单向通信，只能发送GET请求

var img = new Image();
img.onload = img.onerror = function() {
    alert("Ok");
}
img.src = "http://www.abc.com"

JSONP

原理是通过动态创建script标签完成

function handler(res) {
    console.log("The content:", res);
}
var script = document.createElement("script");
script.src = "http://www.abc.com?callback="handler"";
document.body.insertBefore(script, document.body.firstChild);

Comet

是一种服务器向页面推送数据技术。

有两种实现方式：长轮询 和 HTTP流

长轮询

浏览器向服务器发送连接请求，浏览器就一直保持连接打开状态，服务器有数据时便发送数据到浏览器，浏览器关闭连接。然后再次发送连接请求。

HTTP流

浏览器向服务器发送一次连接请求，服务器一直保持连接打开状态。浏览器即使接受数据了也不会断开连接。

SSE（Server-Sent Event）: 服务器发送事件

围绕着Comet推出的API

var source = new EventSource(url); //url 必须与source创建对象的页面同源。
source.onmessage = function(event) {
    var data = event.data;
    // 处理数据
}
source.close(); // 手动关闭连接

Web Sockets

在一个单独的持久连接上提供全双工、双向通信。

wx:// 或 wss:// 为协议名

var socket = new WebSocket("ws://www.abc.com/1.php");
// 成功连接后
socke.onopen = function(){
    alert("Connect Success");
}

// 连接发生错误
socket.onerror = function(err) {
    alert("Connect Failed ", err);
}

// 发送数据
socket.send("Test message");

// 接受数据
socket.onmessage = function(event) {
    var data = event.data;
    // 处理数据
}

socket.close() // 关闭socket连接

HTML5 postMessage

HTML5 window.postMessage 是一个安全的、基于事件的消息API，可用于html内嵌iframe、window.open()新窗口之间的通信。

//发送信息

window.postMessage(msg, url);

//接收postMessage信息

window.addEventListener("message", func, false);
function func(event) {
    var data = event.data;
    // 处理数据
}