1.简介

我们首先看一下什么是websocket，WebSocket是一种与HTTP不同的协议。两者都位于OSI模型的应用层，并且都依赖于传输层的TCP协议。虽然它们不同，但是RFC 6455中规定：it is designed to work over HTTP ports 80 and 443 as well as to support HTTP proxies and intermediaries（WebSocket通过HTTP端口80和443进行工作，并支持HTTP代理和中介），从而使其与HTTP协议兼容。为了实现兼容性，WebSocket握手使用HTTP Upgrade头从HTTP协议更改为WebSocket协议。

WebSocket协议支持Web浏览器（或其他客户端应用程序）与Web服务器之间的交互，具有较低的开销，便于实现客户端与服务器的实时数据传输。服务器可以通过标准化的方式来实现，而无需客户端首先请求内容，并允许消息在保持连接打开的同时来回传递。通过这种方式，可以在客户端和服务器之间进行双向持续对话。通信通过TCP端口80或443完成，这在防火墙阻止非Web网络连接的环境下是有益的。另外，Comet之类的技术以非标准化的方式实现了类似的双向通信。

大多数浏览器都支持该协议，包括Google Chrome、Firefox、Safari、Microsoft Edge、Internet Explorer和Opera。

因为浏览器支持websocket通信，而websocket没有浏览器跨域的限制，而又能根据返回值做js的操作。

2.原理

这个原理很简单，你http协议不支持跨域，那我就不用http,我用websocket,websocket也是现在浏览器支持的协议。我页面如果要和服务器做通信，那我就创建一个websocket的连接，这样就可以跳过跨域的限制，根据跨域服务器上的返回值对页面进行修改。

下面看一个示例，这个是使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容：

前端：

var io = io.connect(‘[http://xx.xxx.xx.xx:8443](http://127.0.0.1:3001)’);

io.on(‘data’,function(data){

//根据返回值修改页面

});

服务器端：

var io = require(‘socket.io’)(server);
io.on(‘connection’,function(client){

client.emit(‘data’,’hello WebSocket .’);

});

3.总结

使用websocket解决跨域，首先也是需要服务端支持websocket相关的协议，可以用于两个页面之间的通信，A页面和A服务器正常通信，B页面通过websocket和A服务器通信，从而达到A页面和B页面的通信。这其实也是一个比较彻底的方案，绕过了浏览器的限制，如果有两个页面的通信，可以使用这个方案。不过我的经验，在日常中，websocket主要还是做服务端向前端推送的工作，做跨域的比较少。

跨域哪些事——8.使用websocket解决跨域

1.简介

2.原理

3.总结