跨域的四种解决方式

JSONP

• SONP的原理是利用浏览器对

  CORS

  • 当我们使用XMLHttpRequest发送请求时，浏览器如果发现该请求不符合同源策略，会自动给该请求加一个请求头：Origin。后台在经过一系列处理后，如果确定接受该请求，则会在返回结果中加入一个响应头：Access-Control-Allow-Origin。
    浏览器会自动判断该响应头中是否包含Origin的值，如果包含，则浏览器会处理响应，我们就可以拿到响应数据；如果不包含，浏览器会直接驳回，这时我们就无法拿到响应数据了。
  • 整个CORS的通信过程，都是浏览器自动完成的，不需要用户参与。对于开发者来说，CORS通信与同源的Ajax通信没有差别，代码完全一样。浏览器一旦发现Ajax请求跨域，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
    因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨域通信。
    *市场上绝大多数浏览器及IE10版本以上都支持CORS。
    *CORS代码实例:

  //服务端
  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);
    }
    res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080"); 
    //表示接受"http://a.jrg.com:8080"这个url来获取资源
    //res.header("Access-Control-Allow-Origin", "*"); 
    //表示接受所有的url来获取资源
    res.send(data);
    //返回数据
  })
  
  //客户端，代码和同源环境下没有区别
  
  
  

  降域

  • 降域也叫跨子域。当两个url的主域名不同，但子域名相同的情况下，我们可以通过 //通过 //URL: http://b.jrg.com:8080/b.html