解决跨域问题前端

【解决跨域问题】
跨域

1.Jsonp
2.CORS 服务器设置允许跨域
3.XHR2
4 proxy代理
- 正向代理
- 反向代理
5.nginx反向代理，由后端来做
6.window.postMessage()
- iframe HTML 元素表示嵌套的浏览上下文。
7.WebSocket协议
- 单工，半双工，全双工通信模式
- scoket.io
- 长轮询，（短）轮询

1.Jsonp

是json的一种使用格式，==只支持get==，需要服务器的支持文章图片 //A页面引入B页面

//A.js iframe.onload=function(){ iframe.contentWindow.postMessage('张三','*') //iframe.contentWindow返回内联框架的window } window.onmessage=function(ev){//监听b传递的消息 console.log(ev.data) }

//B.js window.onmessage=function(ev){ ev.source.postMessage(ev.data+'@@@',ev.origin) }

7.WebSocket协议它是一种网络通信协议，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
允许服务端主动向客户端推送数据，在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
WebSocket目前支持两种统一资源标志符ws和wss，类似于HTTP和HTTPS。其中Upgrade和Connection字段告诉服务端，发起的是webSocket协议
单工，半双工，全双工通信模式

单工：数据传输只支持数据在一个方向上传输；半双工：允许数据在两个方向上传输，但某一时刻只允许数据在一个方向上传输，实际上是一种切换方向的单工通信，不需要独立的接收端和发送端，两者可合并为一个端口；全双工：通信允许数据在两个方向上同时传输，它在能力上相当于两个单工通信方式的结合。全双工指可以同时（瞬时）进行信号的双向传输（A→B且B→A）。指A→B的同时B→A，是瞬时同步的。

// 创建webSocket const socket = new WebSocket('ws://localhost:8080'); // Connection opened连接成功 socket.addEventListener('open', function (event) { socket.send('Hello Server!'); //发送 }); // Listen for messages 接收到数据 socket.addEventListener('message', function (event) { console.log('Message from server ', event.data); });

使用addEventListener方法。指定多个回调函数

//新建 WebSocket 实例。实现客户端就会与服务器进行连接。 var ws = new WebSocket('ws://localhost:8080');

//实例对象的onopen属性，用于指定连接成功后的回调函数。ws.addEventListener('open', function (event) { ws.send('Hello Server!'); });

//实例对象的onclose属性，用于指定连接关闭后的回调函数。 ws.addEventListener("close", function(event) { var code = event.code; var reason = event.reason; var wasClean = event.wasClean; // handle close event });

//实例对象的onmessage属性，用于指定收到服务器数据后的回调函数。 ws.addEventListener("message", function(event) { var data = https://www.it610.com/article/event.data; // 处理数据 });

//实例对象的send()方法用于向服务器发送数据。 ws.send('your message');

//实例对象的onerror属性，用于指定报错时的回调函数。 socket.addEventListener("error", function(event) { // handle error event });

scoket.io Socket.io是一个webSocket库，目标是构建不同浏览器和移动设备上使用的实时应用。它会自动根据浏览器从webSocket ajax长轮询 ifrane流等各种方式选择最佳的方式。
长轮询，（短）轮询（短）轮询：浏览器周期性的向服务器发送请求，间隔时间短（缺点：重复无意义的请求，增加服务器负担）
长轮询：更长的响应时间，当服务器收到请求后，如果没有处理就不响应，超出时间重新连接）（缺点：一直挂着消耗一定资源）