jsonp

• 原理：因为script标签发请求不受同源策略的限制，所以可以通过动态构建script节点，利用节点的src属性，发出get请求，从而绕开ajax引擎
• 具体实现：前端通过在请求的url指定一个回调函数，同时在window上声明这个函数，然后服务器返回该函数调用，同时传入参数，因为是使用script标签请求的，所以会把后端返回的数据当作js脚本执行，那么就调用了原先在window上已经定义了的这个函数
• 有种前端定义函数，服务器端‘调用函数’的感觉
• 缺陷：该方式只能用于get请求

CORS

• 全称 : “跨域资源共享” （Cross-Origin Resource Sharing）

• 使用cors的方式,需要在服务器端配置

• 浏览器将cors请求分成两类：

  • 简单请求：浏览器发出请求，就会在该请求的头信息中，增加一个origin字段，这个origin字段说明了本次请求来自哪个源，服务器端设置Access-Control-Allow-Orgin，指定允许该源允许跨域，这样ajax引擎就不会拦截本次响应，这样就解决了跨域问题了
  • 非简单请求:比如发送put请求，那么浏览器会发出一次预检请求，判断该域名是否在服务器的白名单中，如果收到肯定回复后才会发起请求

postMessage

• 这是一个h5中新增的特性，可以实现多窗口间的信息传递
• 通过获取指定窗口的引用，然后调用postMessage来发送信息，使用 window.onmessage 来接收信息,以此实现不同源之间的信息交换。

window.name

• 基于同一个窗口中设置了window.name 后不同源的页面也可以访问
• 假如有：a b 页面同源、 c 不同源
• 实现原理：先在不同源的子页面（c页面）设置window.name=xxx,然后跳转到一个和父级同源的页面（b页面），这个时候父级页面（a页面）就可以访问同源的子页面中window.name的数据了
• 该方式的好处：可以传输的数据量大

location.hash

• 在主页面中，通过iframe给不同源的窗口传递hash值，这样单向通信就实现了

• 那么如果实现双向通信呢？

  • 由于iframe是没有办法访问到不同源的父级窗口的，所以不能直接修改父级窗口的hash值来实现双向通信，这是需要iframe中再加入一个iframe，该iframe和主页面是同源的，然后通过window.parent.parent.location.hash 来修改主页面的hash值。

document.domain

• 利用document.domain设置主域名，实现相同子域名的跨域操作，此时主域名下的cookie就能够被子域名所访问。
• 如果有主域名相同，子域名不同的iframe的话，也可以对这个iframe进行操作。

websocket

• 使用websocket协议，因为这个协议没有同源限制

http-proxy

• webpack配置代理解决跨域问题

nginx