本篇有四种方法跨域：CORS、JSONP、降域、window.postMessage()
1. CORS
CORS(Cross-Origin Resource Sharing): 跨域资源共享
具体可查看：Cross-Origin Resource Sharing
'Access-Control-Allow-Origin': 'www.baidu.com'//或者指定域
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
问题
- form跨域为什么不用遵循同源政策？
form表单和后端进行请求响应时，必须要有一个submit按钮。点击提交后，会刷新整个页面，旧页面不复存在，那么就不能获取现在这个页面的信息传给旧页面，不会造成数据泄露，浏览器认为这些行为是安全的。 - ajax跨域为什么需要遵循同源政策？
ajax是可以读取响应内容的，浏览器认为这种行为是不安全的，很容易泄露信息。所以同源政策规定，ajax只有在协议相同，域名相同，端口相同的情况下，才能进行跨域操作，否则，request.readySate为0。
response.setHeader('Access-Control-Allow-Origin','https://www.baidu.com')
CROS告诉浏览器，这是自己人，可以访问。设置了cros，则可以打破同源政策。
XMLHttpRequest.readySate的五种状态：
| 状态 | 详细 |
|---|---|
| 0 | 未打开 |
| 1 | 未发送 |
| 2 | 已获取响应头 |
| 3 | 正在下载响应体 |
| 4 | 请求完成 |
2. JSONP
callback.call(undefined, {"name":"Lucia"})
原理
JSONP是一种跨域通信的手段，其实原理非常简单：
- 利用
script标签的src属性实现跨域操作 - 通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。
- 由于使用
script标签的src属性，因此只支持get方法
格式
JSON格式：{ 'a': xxx,'b':yyy }
JSONP格式类似于：
$(callback).call(undefined,{
"success": true,
"amout": "100"
})
//回调函数返回一个符合JSON语法的对象
定义
请求方：浏览器
响应方：服务器
- 请求方创建script，src指向响应方，同时传一个查询参数
?callback=yyy
<script src="http://jsonp.js?callback=yyy"></script>
- 响应方根据查询参数
callback，构造形如:yyy.call(undefined, '你要的数据')-
yyy('你要的数据')
这样的响应
- 浏览器接收到响应，就会执行
yyy.call(undefined, '你要的数据') - 那么请求方就知道了他要的数据
这就是JSONP
约定：
yyy ->随机数 Math.rendom()，不会污染全局变量
JSONP不是ajax，但是jQuery把JSONP归为ajax一类了
面试题：请问JSONP为什么不支持POST请求
答：JSONP是通过动态创建script标签实现的，script只能进行get操作，没办法进行post操作。
3. 降域(document.domain)
原理
通过修改document.domain来跨子域
【前提：主域名要一致】
格式
http://a.yilia.com 调用http://b.yilia.com
<script>
document.domain = yilia.com；
</script>
//将两个域名都降域，此时就可以相互访问了
4. window.postMessage()
window.postMessage() 方法可以安全地实现跨源通信.
