进阶任务十三-跨域

• 什么是同源策略
  同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。
  同源意味着协议相同、域名相同、端口相同。
  不同源的话，有三种行为受到限制：1、Cookie、LocalStorage 和 IndexDB 无法读取。 2、DOM 无法获得。3、AJAX 请求不能发送。

• 什么是跨域？跨域有几种实现形式
  跨域是指从一个域名的网页去请求另一个域名的资源。跨域可以通过JSONP、CORS、降域、PostMessage等方式来实现

• JSONP 的原理是什么
  HTML的

  后端代码：

  //假设域名是localhost, 端口是8080
  
  //更多详细使用方法参考 http://www.expressjs.com.cn/guide/routing.html
  
  /**
   * 当 http://localhost:8080/getInfo 的GET请求到来时被下面匹配到进行处理
   * 发送JSON格式的响应数据 {name: 'ruoyu'}
   */
  app.get("/getNews", function(req,res){
    var news = [
      "第11日前瞻：中国冲击4金，博尔特再战",
      "正直播出战，男双力争会师决赛",
      "女排将死磕巴西！郎平安排男陪练模仿对方核心",
      "没有中国选手和巨星的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)
    }
  })
  

  • CORS实现

  前端代码：

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

  后端代码：

  app.get("/getNews", function(req,res){
    var news = [
      "第11日前瞻：中国冲击4金，博尔特再战",
      "正直播出战，男双力争会师决赛",
      "女排将死磕巴西！郎平安排男陪练模仿对方核心",
      "没有中国选手和巨星的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)
    }
  
    res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080")
    res.send(JSON.stringify(data))
  })
  

  • 降域实现：

  前端a.html代码：

  
  
  
      
  
  
      
  
          
  使用降域实现跨域
          
  
              
          
          
      
      
  
  
  

  前端b.html代码：

  • PostMessage实现：

  前端a.html代码：

  
  
  
      
  
  
      
  
          
  使用降域实现跨域
          
  
              
          
          
      
      
  
  
  

  前端b.html代码：