解决跨域问题

1.Jsonp

是json的一种使用格式，==只支持get==，需要服务器的支持
<script> <img> <link>不受同源策略的影响
用script的src属性向服务器发送数据，返回一个带有方法和数据的js，利用本地js处理数据

//动态创建 script
var script = document.createElement('script');

// 设置回调函数
function getData(data) {
    console.log(data);
}

//设置 script 的 src 属性，并设置请求地址
script.src = 'http://localhost:3000/?callback=getData';

// 让 script 生效
document.body.appendChild(script);

2.CORS 服务器设置允许跨域

可以发送get ，post

服务器设置请求头:Access-Control-Allow-Origin:*
*/或者具体地址 
写了*号就不允许携带cookie

3.XHR2

  HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能
  IE10以下的版本都不支持
  在服务器端做一些小小的改造即可
  header('Access-Control-Allow-Origin:*'); //*代表可访问的地址，可以设置指定域名
  header('Access-Control-Allow-Methods:POST,GET');

区别：
代理实现最麻烦，但使用最广泛，任何支持AJAX的浏览器都可以使用这种方式
JSONP相对简单，但只支持GET方式调用
XHR2最简单，但只支持HTML5，如果你是移动端开发，可以选择使用XHR2

http-proxy-middleware 代理中间件

实现请求转发给其他服务器

4 proxy代理

基于 webpack 的，通过 webpack-dev-server

相当于 node 模拟一个nginx 服务器请求服务器不存在跨域

webpack-dev-server 会启动一个本地开发服务器，当本地发送请求的时候，代理服务器响应该请求，并将请求转发到目标服务器，目标服务器响应数据后再将数据返回给代理服务器，最终再由代理服务器将数据响应给本地

正向代理

正向代理代理的对象是客户端，隐藏了真实的客户端
你在浏览器中输入网址后，浏览器就不会访问相应服务器，而是将请求发送给正向代理，再由正向代理转发给服务器

反向代理

反向代理代理的对象是服务端，隐藏真实的服务器

反向代理服务器会帮我们把请求转发到真实的服务器那里去

我们常说的Nginx就是性能非常好的反向代理服务器，可以用来做负载均衡

devServer:{
    host: 'localhost',//target host
    port: 8080,
    //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
    proxy:{
        '/api':{
            target: 'http://192.168.1.30:8085',//代理地址，路径只需要写（'/api/user/index'）,以/api开始的都转到http://192.168.1.30:8085
            changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
            //ws: true, // proxy websockets
            pathRewrite: {
                '^/api': '/' //重写url，不想出现在路径中
                //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
                //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
           }
    },
    "/name":{...}//配置多个代理
}
},
proxy:{
	'/':{
		target:'http://127.0.0.1:3001',/（'/user/index'）,以/开始的都转到http://127.0.0.1:3001
		changeOrigin:true//dev-server 起一个服务来做中层代理
		}
}

5.nginx反向代理，由后端来做

6.window.postMessage()

用于单点登录的实现，a系统在登录的时候将之后拿到的核心信息 token，存储到对应兄弟B系统的localStorage中，实现登录信息共享

方法可以安全地实现跨源通信。例如，在页面和它生成的弹出窗口之间（window.opener），或者在页面和嵌入其中的iframe之间。

iframe HTML 元素表示嵌套的浏览上下文。

将另一个 HTML 页面嵌入到当前页面中。每个嵌入式浏览上下文都有自己的会话历史记录和文档。

<iframe id="iframe" src="http://1277.0.0.1:1002/message/B.html" frameborder="0" style="display:none"></iframe>
//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)
}

//单点登录

  //  验证postMessage的传递，登录注册中心A系统（http://192.168.1.22:8080）
init () {
    // 获取 token
    const token = "a9bab2fe-7630-43a3-8c9f-10cee0b4253c"
    const src = "http://192.168.1.22:8081"
    // 动态创建一个不可见的iframe，在iframe中加载一个跨域HTML
    const iframe = document.createElement("iframe")
    iframe.src = src
    // 使用postMessage()方法将token传递给iframe
    iframe.onload = () => {
        iframe.contentWindow.postMessage(token, src)
        // iframe.remove()
    }
    document.body.append(iframe)
}

// 在这个B系统所加载的HTML中绑定一个事件监听器，当事件被触发时，把接收到的token数据写入localStorage
window.addEventListener('message', function (event) {
    // 配置兄弟站点列表
    const brotherWebsite = [
        // 'http://192.168.1.22:8080'
    ]
    // 如果消息源在兄弟站点中
    if (brotherWebsite.includes(event.origin)) {
        this.localStorage.setItem('www.suczone.com', event.data)
    }
}, false)

//单点登录使用token
添加链接描述

7.WebSocket协议

它是一种网络通信协议，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
允许服务端主动向客户端推送数据，在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

WebSocket目前支持两种统一资源标志符ws和wss，类似于HTTP和HTTPS。其中Upgrade和Connection字段告诉服务端，发起的是webSocket协议

单工，半双工，全双工通信模式

单工：数据传输只支持数据在一个方向上传输；

半双工：允许数据在两个方向上传输，但某一时刻只允许数据在一个方向上传输，实际上是一种切换方向的单工通信，不需要独立的接收端和发送端，两者可合并为一个端口；

全双工：通信允许数据在两个方向上同时传输，它在能力上相当于两个单工通信方式的结合。全双工指可以同时（瞬时）进行信号的双向传输（A→B且B→A）。指A→B的同时B→A，是瞬时同步的。

简易聊天室

添加链接描述

1.使用websocket ，先初始化new webSocket（），open打开链接。
2.onmessage获取服务器传回来的信息。根据信息判断，是否有user属性（代表当前在线人，排除自己遍历到页面中），如果没有user就代表发送回来的是聊天信息，存储起来在页面遍历。
3.点击发送按钮，先判断是否用聊天对象的名字，send（）发送整理好的信息

// 创建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 = event.data;
  // 处理数据
});

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

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

scoket.io

Socket.io是一个webSocket库，目标是构建不同浏览器和移动设备上使用的实时应用。它会自动根据浏览器从webSocket ajax长轮询 ifrane流等各种方式选择最佳的方式。

长轮询，（短）轮询

（短）轮询：浏览器周期性的向服务器发送请求，间隔时间短（缺点：重复无意义的请求，增加服务器负担）
长轮询：更长的响应时间，当服务器收到请求后，如果没有处理就不响应，超出时间重新连接）（缺点：一直挂着消耗一定资源）