对跨域的理解

1.同源策略:协议相同；域名相同；端口号相同

2.非同源网站的限制：

• cookie,localStorage,indexDB无法读取
• DOM无法获得
• ajax请求无法发送

3.如何规避无法读取cookie的限制

在一级域名相同的情况下
A网页是http://test.gamesafe.qq.com/kuayu.html
B网页是http://test.gslab.qq.com/kuayu.html

image.png
image.png
是拿不到cookie的
解决方法1：设置相同的document.domain
两个网页就可以共享Cookie。
//document.domain = 'qq.com';
document.cookie="test2=12345;domain=.qq.com";这么设置才对，上面的不对
解决方法2：服务器指定Cookie的所属域名为一级域名
比如.example.com。
Set-Cookie: key=value; domain=.example.com; path=/
这样的话，二级域名和三级域名不用做任何设置，都可以读取这个Cookie。

4.如何规避无法获取DOM的限制

典型的例子是iframe的父子通信，window.open打开的页面的通信

• 如果两个窗口一级域名一致，通过document.domain进行避规

  
  image.png
  image.png

//父级页面
<iframe id="myIFrame" src="http://test.gslab.qq.com/kuayu.html"></iframe>
document.domain = 'qq.com';
console.log(document.getElementById("myIFrame").contentWindow.document)

<script>
    //子页面
    document.domain = 'qq.com';
    console.log(parent.document.body)
</script>

• 利用hash传值
  通过监听hashchange事件得到通知

<script>
//子页面：
    document.domain = 'qq.com';
    window.onhashchange = checkMessage;
    function checkMessage() {
        var message = window.location.hash;
        console.log(message);//#name=tang123
    }
</script>

• 利用window.name
  只要在一个窗口里，前一个页面设置了这个属性，后一个页面就可以读取他
  读取方式：var data = document.getElementById('myFrame').contentWindow.name;