演示三种跨域的解决方式

JSONP

// 前端程序









  

    

      
第11日前瞻：中国冲击4金 博尔特再战
      
男双力争会师决赛 
 
      
女排将死磕巴西！
    
    换一组
  
  

// 后端程序，使用 server-mock 启动

app.get('/getNews', function(req, res){
    var news = [
        "第11日前瞻：中国冲击4金 博尔特再战200米羽球",
        "正直播柴飚/洪炜出战 男双力争会师决赛",
        "女排将死磕巴西！郎平安排男陪练模仿对方核心",
        "没有中国选手和巨星的110米栏 我们还看吗？",
        "中英上演奥运金牌大战",
        "博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多",
        "最“出柜”奥运？同性之爱闪耀里约",
        "下跪拜谢与洪荒之力一样 都是真情流露"
    ]
    var data = [];
    for(var i=0; i<3; i++){
        var index = parseInt(Math.random()*news.length);
        data.push(news[index]);
        news.splice(index, 1);
    }


    var cb = req.query.callback;
    if(cb){
        res.send(cb + '('+ JSON.stringify(data) + ')');
    }else{
        res.send(data);
    }
    // 根据 url 参数，返回数据形式直接是 function() 的形式，在页面中直接就是要执行的 JS 函数代码
})

核心是

  $('.change').addEventListener('click', function(){
    var script = document.createElement('script');
    // 第1步：创建一个 script 标签
    script.src = 'http://127.0.0.1/getNews?callback=appendHtml';
    // 第2步：将 script 的 src 属性改为目标域的地址 url，并在 url 中带好参数，方便后端直接将返回数据定义成要执行的 js 函数的形式
    document.head.appendChild(script);
    // 第3步：将创建并修改好的 script 标签加到页面 DOM 中
    document.head.removeChild(script);
    // 第4步：script 标签使用完毕，可以从文档中移除
  })

    var cb = req.query.callback;
    if(cb){
        res.send(cb + '('+ JSON.stringify(data) + ')');
    }else{
        res.send(data);
    }
    // 根据 url 参数，返回数据形式直接是 function() 的形式，在页面中直接就是要执行的 JS 函数代码

CORS

// 前端程序









  

    

      
第11日前瞻：中国冲击4金 博尔特再战
      
男双力争会师决赛 
 
      
女排将死磕巴西！
    
    换一组
  
  

// 后端程序
app.get('/getNews', function(req, res){

   var news = [
       "第11日前瞻：中国冲击4金 博尔特再战200米羽球",
       "正直播柴飚/洪炜出战 男双力争会师决赛",
       "女排将死磕巴西！郎平安排男陪练模仿对方核心",
       "没有中国选手和巨星的110米栏 我们还看吗？",
       "中英上演奥运金牌大战",
       "博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多",
       "最“出柜”奥运？同性之爱闪耀里约",
       "下跪拜谢与洪荒之力一样 都是真情流露"
   ]
   var data = [];
   for(var i=0; i<3; i++){
       var index = parseInt(Math.random()*news.length);
       data.push(news[index]);
       news.splice(index, 1);
   }
 
   // CORS 方法的关键在后端这里，后端这里对于允许跨域访问自身 JS 接口的地址专门设置了返回响应的头部，如下述这两行所示
   res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080"); 
   //res.header("Access-Control-Allow-Origin", "*"); 
   // 第一行允许专门的地址跨域访问自身，第二行允许所有地址跨域访问自身
 
   res.send(data);
})

核心是

    // CORS 方法的关键在后端这里，后端这里对于允许跨域访问自身 JS 接口的地址专门设置了返回响应的头部，如下述这两行所示
    res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080"); 
    //res.header("Access-Control-Allow-Origin", "*"); 
    // 第一行允许专门的地址跨域访问自身，第二行允许所有地址跨域访问自身
  

降域

  
使用降域实现跨域
  

    
  

  

浏览器中不同域的框架也是不能通过js进行交互的，但是不同框架之间可以获取到window对象，但却无法获取到相应的属性和方法。

例如 a.baidu.com 域下的一个 html 文档里有一个在其他域下（b.baidu.com）的 iframe 框架，在a.baidu.com 中并不能访问到 b.baidu.com 里的数据；

但可以获取到 b.baidu.com 中的 window 对象，但是这时 window 的属性和方法并不可用，两个文件中使用 document.domain('baidu.com')方法 把域名都降到baidu.com；

这样就可以在 a.baidu.com 中使用 iframe 里面的 window 的所有属性和方法了，通过window.frames[0] 获取到 iframe 框架，但是这时再通过window.frames[0].document.querySelector(element) 获取到 iframe 里的 element 元素。

在b.baidu.com 中通过window.parent.document.querySelector(element) 获取到html里的元素。