前端跨域通信的几种方式

域名组成部分

什么是同源策略及其限制内容

同源策略指在限制一个源的资源与另一个源的资源进行交互。是一种隔离潜在恶意文件的安全机制。

同源是指“协议+域名+端口”三者相同，及时两个域名指向同一个ip地址，也非同源。

同源策略限制的内容有：

• Cookie、LocalStorage、IndexedDB 等存储性内容
• DOM 节点
• AJAX 请求发送会被浏览器拦截

但是有三个标签是允许跨域加载资源：

• <img src='xxx'>
• <link href='xxx'>
• <script src='xxx'>

跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

跨域的几种方式

1.jsonp

jsonp原理是利用script标签跨域加载资源，但是需要服务端支持返回，但仅支持get请求。

2.cors

cors需要服务端/nginx配置请求头Access-Control-Allow-Origin:*

3.postMessage

postMessage支持两个窗口间进行通信

4.webSocket

websocket不受同源策略限制

5.iframe+location.hash

利用iframe地址的location.hash进行传值。