跨域解决方案

怎么辨别跨域：

JSONP

利用了 script 标签可跨域的特性，在客户端定义一个回调函数（全局函数），请求服务端返回该回调函数的调用，并将服务端的数据以该回调函数参数的形式传递过来，然后该函数就被执行了
script，img，link，iframe不存在跨域请求限制

代码：

callback这个名字是定死了的，不能改

后端：后端返回f(‘你好’)，刚好这个f函数在前端定义了，会立即执行f(‘你好’)，最后弹窗你好弹框

jquery的ajax方法实现JSONP

前端：

后台：

结果：

请求：Jquery3410427...448148是jquery为我们创建的全局函数，&后面接了一个变量_，_157...815是为了清除get请求的缓存

返回：

结论：
Jquery默认帮我们发script请求
Jquery默认创建全局函数
Jquery默认执行全局函数时执行成功回调函数

修改请求头-CORS跨域资源共享

前端：

后端：

缺点：
Access-Control-Allow-Origin写具体地址时只能写一个
Access-Control-Allow-Origin写时，就不再允许携带cookie(浏览器的机制，时携带cookie很不安全)

http proxy

使用webpack的devserver实现，适用于开发阶段调试：

ngnix反向代理

本地8080请求ngnix代理服务器8080，是同源的，不存在跨域限制
ngnix代理服务器8080再去请求真正的服务器5000，因为服务器与服务器之间通信不会有同源策略控制，同源策略控制只是浏览器的机制。

postMessage

html页面与页面之间的通信
1001/MESSAGE/A.html向1002/MESSAGE/B.html请求数据：

第13行，display:none是因为这个iframe只用来发请求，不展示在页面上
第17行contentWindow是iframe上的一个属性
第22行，ev.data是B页面返回的数据
可以在MDN上查询postMessage的用法：

第17行的ev.data是接收的A页面的数据
第19行的ev.origin是指A页面链接

结果：

WebSocket协议跨域

这种方式本质没有使用HTTP响应头，因此也没有跨域的限制
服务器端：

客户端：

document.domain+iframe

只能实现同一个主域，不同子域下的操作
即可以：v.qq.com向sports.qq.com发送

window.name+iframe

:1001/NAME/A.html：

第18行，第一次onload是页面初始化的时候，第二次是iframe.src被重新赋值后
:1001/NAME/proxy.html:

proxy.html页面就是一个空代理，只要中间代理proxy.html没有设置window.name，A.html接收到的还是B.html里的window.name

:1002/NAME/B.html：

结果：

location.hash+iframe