跨域四种的解决方式

JSONP

  • JSONP的原理是利用浏览器对<script>标签的src属性没有同源限制这一特性，通过动态插入一个<script>标签，对服务端发出相应的请求。同时服务器端也不在返还JSON格式的数据，而是返回一段调用。
    JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。
    实际项目中JSONP通常用来获取JSON格式的数据，这时前后端通常约定一个参数callback，这个参数的值，就是处理返回数据的函数名称。
  • JSONP的优点
    1.兼容性较好，在一些老版本的浏览器中也可以运行，不需要XMLHttpRequest或ActiveX的支持；
    2.将回调方法的权限给了调用方，服务端只提供纯服务的数据，至于提供服务以后的页面渲染和后续view操作都由调用者自己定义。
  • JSONP的缺点
    1.它只支持get请求而不支持post等其它类型的请求；
    2.它只支持跨域HTTP请求，而不能解决不同域的两个页面之间如何进行JavaScript调用的问题；
    3.在调用失败时，不会返回各种HTTP状态码，大多数框架的实现都是结合超时时间来判定的；
    4.安全性较低，不易得到保障。
  • JSONP代码实例
//服务端
<?php
  header('Content-type: application/json');     //获取回调函数名
  $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);     //json数据
  $json_data = '["customername1","customername2"]';     //输出jsonp格式的数据
  echo $jsoncallback . "(" . $json_data . ")";
?>

//客户端
<script type="text/javascript">
  function callbackFunction(result, methodName){     //回调函数
    var html = '<ul>';
    for(var i = 0; i < result.length; i++){
      html += '<li>' + result[i] + '</li>';
    }
    html += '</ul>';
    document.getElementById('divCustomers').innerHTML = html;
  }
</script>
<script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction">
//客户想访问的地址
</script>

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);
  //返回数据
})

//客户端，代码和同源环境下没有区别
<script>
  $('.change').addEventListener('click', function(){
    var xhr = new XMLHttpRequest();
    xhr.open('get', 'http://b.jrg.com:8080/getNews', true);
    xhr.send();
    xhr.onreadystatechange = function(){
      if(xhr.readyState === 4 && xhr.status === 200){
        appendHtml( JSON.parse(xhr.responseText) )
      }
    }
    window.xhr = xhr
  })
  function appendHtml(news){
    var html = '';
    for( var i=0; i<news.length; i++){
      html += '<li>' + news[i] + '</li>';
    }
    console.log(html);
    $('.news').innerHTML = html;
  }
  function $(id){
    return document.querySelector(id);
  }
</script>

降域

  • 降域也叫跨子域。当两个url的主域名不同，但子域名相同的情况下，我们可以通过<iframe>标签将目标url先嵌入html中，再设置页面的document.domain值为两个url共同的子域名，即可实现降域。
  • 降域最重要的前提条件是两个url的子域名必须相同。
  • 降域代码实例：
//URL: http://a.jrg.com:8080/a.html
<iframe src="http://b.jrg.com:8080/b.html" frameborder="0" ></iframe>
//通过<iframe>标签将目标url嵌入
<script>
  document.querySelector('.main input').addEventListener('input', function(){
    console.log(this.value);
    window.frames[0].document.querySelector('input').value = this.value;
  })
  document.domain = "jrg.com";     //通过设置共同的子域名来实现降域
</script>

//URL: http://b.jrg.com:8080/b.html
<script>
  document.querySelector('#input').addEventListener('input', function(){
    window.parent.document.querySelector('input').value = this.value;
  })
  document.domain = 'jrg.com';     //通过设置共同的子域名来实现降域
</script>

PostMessage

  • PostMessage是一个用于安全地使用跨源通信的方法。它允许来自不同源的脚本采用异步的方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递，相当于提供了一个受控的机制来安全地绕过浏览器的同源限制。
  • PostMessage(data,origin)方法接受两个参数：
    1.data：要传递的数据。html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这一点，部分浏览器仍然只能处理字符串参数；
    2.origin：字符串参数。用于指明目标窗口的源，即协议+主机+端口号[+URL]，URL会被忽略，所以可以不写。这个参数主要是出于安全考虑，postMessage方法只会将message传递给指定窗口。我们也可以将其设置为"*"，这样就可以传递给任意窗口；如果要指定和当前窗口同源的话，则设置为"/"即可。
  • PostMessage代码实例：
//URL: http://a.jrg.com:8080/a.html
<iframe src="http://localhost:8080/b.html" frameborder="0" ></iframe>
<script>
  $('.main input').addEventListener('input', function(){     //监听input中的内容
    console.log(this.value);
    window.frames[0].postMessage(this.value,'*');     //发送相应的信息到目标url
  });
  window.addEventListener('message',function(e){     //监听接收到的数据信息
    $('.main input').value = e.data;     //将接收到的信息显示出来
    console.log(e.data);
  });
  function $(id){
    return document.querySelector(id);
  };
</script>

//URL: http://b.jrg.com:8080/b.html
<script>
  $('#input').addEventListener('input', function(){     //监听input中的内容
    window.parent.postMessage(this.value, '*');     //发送相应的信息到目标url
  });
  window.addEventListener('message',function(e){     //监听接收到的数据信息
    $('#input').value = e.data;     //将接收到的信息显示出来
    console.log(e.data);
  });
  function $(id){
    return document.querySelector(id);
  };
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容