跨域【详解】

本篇有四种方法跨域：CORS、JSONP、降域、window.postMessage()

1. CORS

CORS(Cross-Origin Resource Sharing): 跨域资源共享
具体可查看：Cross-Origin Resource Sharing

'Access-Control-Allow-Origin': 'www.baidu.com'//或者指定域

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

问题

1. form跨域为什么不用遵循同源政策？
   form表单和后端进行请求响应时，必须要有一个submit按钮。点击提交后，会刷新整个页面，旧页面不复存在，那么就不能获取现在这个页面的信息传给旧页面，不会造成数据泄露，浏览器认为这些行为是安全的。
2. 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是一种跨域通信的手段，其实原理非常简单：

1. 利用script标签的src属性实现跨域操作
2. 通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。
3. 由于使用 script标签的src属性，因此只支持get方法

格式

JSON格式：{ 'a': xxx,'b':yyy }
JSONP格式类似于：

$(callback).call(undefined,{
  "success": true,
  "amout": "100"
})
 //回调函数返回一个符合JSON语法的对象

定义

请求方：浏览器
响应方：服务器

1. 请求方创建script，src指向响应方，同时传一个查询参数 ?callback=yyy

<script src="http://jsonp.js?callback=yyy"></script>

2. 响应方根据查询参数callback，构造形如:
   1. yyy.call(undefined, '你要的数据')
   2. yyy('你要的数据')
      这样的响应
3. 浏览器接收到响应，就会执行yyy.call(undefined, '你要的数据')
4. 那么请求方就知道了他要的数据
   这就是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() 方法可以安全地实现跨源通信.