前端跨域的处理方式

同源策略：
浏览器的同源策略是一种安全机制，用于保护用户信息和防止恶意代码的执行。它是由浏览器实施的一组规则，限制了不同源（origin）的网页之间的交互。

同源是指两个网页具有相同的协议（protocol），主机（host）和端口号（port）。如果两个网页不满足同源条件，它们就属于不同的源，同源策略将应用。

① JSONP

回调函数+数据就是 JSON With Padding，简单、易部署。
(做法:动态插入script标签，设置其src 属性指向提供JSONP 服务的URL地址，查询字符串中加入 callback 指定回调函数，返回的 JSON 被包裹在回调函数中以字符串的形式被返回，需将 script标签插入 body 底部)。

缺点是只支持 GET，不支持POST(原因是通过地址栏传参所以只能使用GET)

② document.domain 跨子域

document.domain 跨子域 ( 例如a.qq.com 嵌套一个b.qq.com的iframe如果a.qq.com设置document.domain为qq.com。b.qq.com 设置document.domain为qq.com，那么他俩就能互相通信了，不受跨域限制了。 注意:只能跨子域)

③ postMessage

HTML5的postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。适用于不同窗口iframe之间的跨域

otherWindow.postMessage(message, targetOrigin, [transfer]);

message : 将要发送到其他 window的数据。

targetOrigin: 通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。

transfer(可选)： 是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

④ CORS

CORS(Cross Origin Resource Share)对方服务端设置响应头设置相应头:”Access-Control-Allow-Origin
CORS请求默认不发送Cookie和HTTP认证信息。如果要把 Cookie 发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段。

⑤ 服务端代理

在浏览器客户端不能跨域访问，而服务器端调用 HTTP 接口只服务端代理是使用HTTP 协议，不会执行JS 脚本，不需要同源策略，也就没有跨越问题。简单地说，就是浏览器不能跨域，后台服务器可以跨域。(一种是通过http-proxy-middleware 插件设置后端代理;另一种是通过使用http 模块发出请求)。

⑥ websocket

webSocket: 一种在单个tcp连接上进行全双工通信的协议，它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的。
WebSocket和HTTP都是应用层协议，都基于 TCP 协议 , 只需要一次握手（使用HTTP协议）客户端和服务端就可以建立持久性的链接，进行双向数据传输 , 实现场景: “聊天室”，“消息推送”,“实时动态”等功能。
曾经的方案：
短轮询: 每隔一段时间就询问一次服务器是否有新的消息，缺点就是有一定的延迟，浪费资源
长轮询：客户端发送请求后如果数据没有更新的话服务器就先将其挂起，有新消息则传回，等传回后又重新发起请求等待数据更新，缺点就是服务器需要保持大量的连接