跨域

同源策略

1 . 含义
1995年，同源策略由netscape公司引入浏览器，目前，所有浏览器都实行这个策略。同源的含义是指三个相同：

• 协议相同
• 域名相同
• 端口相同

2. 目的
   同源策略的目的是为了保护用户信息的安全，防止恶意网站窃取数据。
   设想这样一种情况：a网站是一家银行，用户登录以后，又去浏览其他的网站，如果其他的网站可以读取a网站的cookie，会发生什么？
   很显然，如果cookie包含隐私（比如存款金额），这些信息就会泄露、更可怕的是，cookie往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源策略的限制。
3. 限制范围
   三种行为受到限制：

• cookie/localstorage/indexdb无法读取
• dom无法获得
• ajax请求不能发送

跨域及实现形式

含义
跨域就是突破同源策略的限制，使一个域名的网页可以请求另一个域名的资源。
实现方式

• jsonp:步骤：

1. 定义数据处理函数_fun
2. 创建script标签，src的地址执行后端接口，最后加个参数callback=_fun
3. 服务端在收到请求后，解析参数计算返回数据，输出fun(data)字符串
4. fun(data)会放到script标签作为js执行，此时会调用fun函数，将data作为参数。
   代码：
   html:

    

        

       

       

    
    第一组

前端

$('.change').addEventListener('click',function(){
    var script=document,createElement('script');
    script.src='http://localhost:8080/getnews?callback=appendHtml';
    document.head.appendChild(script);
    document.head.removeChild(script);
})
function appendHtml(news){
    var html='';
    for(var i=0;i';
}
    console.log(html);
    $('.news').innerHtml=html
}

后台：

var cb=req,query,callback;
if(cb){
    res.send(cb='('+JSON.stringify(data+'))')
}else{
    res.send(data);
}

• cros
  在服务器端加上res.header("Access-control-Allow-Origin","http://a.jirengu,com:8080")
  代码：
  html中

    

        

       

       

    
    第一组

前台：

$('.change').addEventListener('click',function(){
    var xhr=new XMLHttpRequest();
    xhr.open('get','http://jrg,com:8080',true);
    xhr.send();
    xhr.onreadystatechange=function(){
      if(xhr.readyState===4&&xhr,status===200){
        appendHtml( JSON.parse(xhr.responseText))
}
}
})
function appendHtml(news){
    var html='';
    for(var i=0;i'
}
    console.log(html);
    $('.news').innerHtml=html;
}

后台：

app.get('/getNews',function(req,res){
    var news=[.....]
var data=[];
for (var i=0;i<3;i++){
    var index=parseInt(Math.random()+news.length);
    data.push(news[index]);
    news.splice(index,1);
}
res.header('Acess-Control-Allow-Origin','http://a.jrg.com:8080');
res,send(data);
})

• 降域
  仅限于主域名相同子域名不同的两个页面的交互，可以通过设置document.damain属性来使来年各个页面个的域名相同，从而避开同源策略，实现跨域。。
• postMessage
  两个窗口能够通信的前提是一个窗口以iframe的形式存在于另一个窗口，或者一个窗口是通过另一个窗口通过window.open()或者超链接的形式打开的。
  理解就是a向b发送消息，如果b接收就监听message事件，然后b向a发送消息，如果接收a就监听message事件
  示例代码：
  a.html中：