问答

同源策略是浏览器安全的基石, 规定了不同源的网站不能相互读取资源

同源定义
1. 相同协议
2. 相同主机
3. 相同端口
目的
为了用户的信息安全, 防止恶意网站盗窃数据
限制范围
同源政策越来越严格, 共有三种行为受到限制
1. Cookie, LocalStorage和IndexedDB无法读取
2. DOM 无法获得
3. AJAX 请求不能发送

跨域就是绕过浏览器的同源政策, 实现跨源通信

降域
通过降域可以使两个一级域名相同, 二级域名不同的网页实现跨域资源共享, 但是ajax请求不能通过这种方式跨域, 只有cookie和iframe可以
- cookie共享
  例如:

//a.guoqichen.com
document.cookie = 'name=gqc;domain=guoqichen.com'
//那么这个cookie在一级域名为guoqichen.com的网站就能共享

2016-09-17_141823.png

- iframe资源共享
例如:

//a.guoqichen.com
//b.guoqichen.com
window.domain='guoqichen.com'

postMessage
HTML5的API, 在window对象上增加了一个方法window.postMessage()，是一个安全的跨源通信的方法
语法:
<blockquote>otherWindow.postMessage(message, targetOrigin); --- MDN</blockquote>
然后目标窗口通过监听message事件来获取数据, 其中message事件提供data API来获取接受到的数据

window.addEventListener('message',function(event){
    console.log(event.data)
})

JSONP
全称JSON with padding, 注意与JSON数据格式区别, 只是因为传输的数据以JSON格式, 所以叫JSONP, AJAX请求跨域的常用方法, 特点是简单实用, 兼容性强, 实现原理是利用网页添加一个script标签, 向服务器请求JSON数据, 这种做法不受同源政策限制, 服务器接到请求后, 将数据放在指定名字的回调函数里传回来, 但是只能发送get请求
CORS
cross origin resource sharing, W3C的标准, 跨域AJAX请求的根本解决办法, 主要需要服务器端实现了CORS的接口, 实现原理是服务器在响应头加入Assess-Control-Allow-Origin字段, 如果发出请求的网站包含在被请求网站的允许名单中, 就能实现跨域AJAX请求

演示