跨域的几种实现方式

作者: Schrodinger的猫 | 来源:发表于2017-07-28 14:55 被阅读0次

#hello，JS：15 同源策略 & 跨域(JSONP)
Ajax 请求和跨域
跨域的几种实现方式
跨域的几种实现方式
跨域的几种实现方式
跨域的几种实现方式
跨域的几种实现方式与原理
跨域的几种演示
跨域问题
springboot 三种跨域处理方式

JSONP

JSONP 是JSON with padding（填充式JSON 或参数式JSON）的简写；JSONP 看起来与JSON 差不多，只不过是被包含在函数调用中的JSON，就像这样：

callback({ "name": "li" });

JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调
函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据。举例：

<script>http://api.jirengu.com/city.php?callback=getCity</script>

jsonp实例：
html代码

<p>您现在所听的歌曲为：</p>
<p id="songs"></p>
<br>
<p id="singer"></p>
<img src="" id="songImg">

js代码

    var songs= document.getElementById('songs');
    var singer= document.getElementById('singer');
    var songImg= document.getElementById('songImg');
    function getSong(res) {
        var song = res.song[0];
        songs.innerHTML=song.title;
        singer.innerHTML = song.artist;
        songImg.src=song.picture;
    }
    var script = document.createElement('script');
    script.src="http://api.jirengu.com/fm/getSong.php?channel=4&callback=getSong";
    document.head.appendChild(script);

CORS

CORS全局资源共享，整个CORS通信过程，都是浏览器自动完成，不需要用户参与，对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
实现CORS的关键在于服务器，只要服务器开启了CORS接口，就可以实现跨域。
浏览器将CORS请求分为两部分简单请求和非简单请求
只要同时满足下面两大条件就属于简单请求。
请求方法是：get，post，head之一；
HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
其他的请求则被称为非简单请求。
简单请求：浏览器直接发出CORS请求。在头信息中增加一个Original字段，标明本次请求来自哪个源。服务器根据值来决定是否同意这次请求。
如果不在允许范围内，服务器也会返回一个正常响应，但浏览器发现这个回应的头信息没有包含Access-Control-Allow-Origin字段，浏览器便会抛出一个错误；
如果在允许范围内，服务器返回的响应会多几个头信息字段。

<!doctype html>
<html>
<meta charset="UTF-8">
<head>
</head>
<body>
  <div class="query-area">
    <input type="text" name="username" value="hunger" placeholder="hunger, ruoyu, anyone">
    <button>查询朋友</button>   
  </div>
  <div class="detail-area">
    <ul>     
    </ul>
  </div>
  <script>
    var btn = document.querySelector('.query-area button')
    var input = document.querySelector('.query-area input')
    btn.addEventListener('click', function(){
       var xhr = new XMLHttpRequest()
       xhr.onreadystatechange = function(){
         if(xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)){
          var friends = JSON.parse(xhr.responseText)
          render(friends)
         }
       }
      xhr.open('get', 'http://localhost:8080/getFriends?username=' + input.value, true)
      xhr.send()
    })
   function render(friends){
      var detailCt = document.querySelector('.detail-area ul')
      detailCt.innerHTML = '';
      var ct = document.createDocumentFragment()
      for(var i = 0; i < friends.length; i++){
        var node = document.createElement('li')
        node.innerText = friends[i]
        ct.appendChild(node)
      }
      detailCt.appendChild(ct)
    }
  </script>
  
</body>
</html>

服务器端代码：

router.get('/getFriends', function(req, res) {
    var username = req.query.username // 通过 req.query获取请求参数
    var friends
  
  //根据请求参数mock数据
  switch (username){
    case 'ruoyu':
        friends = ['小米', '小刚']
        break
    case 'hunger':
        friends = ['小谷', '小花']
        break;
    default:
        friends = ['没有朋友']
  }
  res.header("Access-Control-Allow-Origin","*");
  res.send(friends)
})

没加res.header("Access-Control-Allow-Origin","*");跨域失败

Markdown

加了之后成功获取数据

Markdown

postMessage

postMessage主要用于解决页面与打开新窗口的数据传递；
多窗口之间的消息传递；
页面和嵌套的iframe消息传递。
postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。
postMessage(data,origin)方法接收两个参数：
1.data：要传递的数据；html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化
2.origin：字符串，指明目标窗口的源，协议+主机+端口号[+URL]

Markdown

//a.html
<!doctype html>
<html>
<meta charset="UTF-8">
<head>
  <style>
    .ct{
      width: 910px;
      margin: auto;
    }
    .main{
      float: left;
      width: 450px;
      height: 300px;
      border: 1px solid #ccc;
    }
    .main input{
      margin: 20px;
      width: 200px;
    }
    .iframe{
      float: right;
    }
    iframe{
      width: 450px;
      height: 300px;
      border: 1px dashed #ccc;
    }
  </style>
</head>
<body>
<div class="ct">
  <h1>使用postMessage实现跨域</h1>
  <div class="main">
    <input type="text" placeholder="http://localhost:8080/a.html">
  </div>
  <iframe src="http://localhost:8080/b.html" frameborder="0" ></iframe>
</div>
  <script>
      $('.main input').addEventListener('input', function(){
          window.frames[0].postMessage(this.value,'*');
      })
      window.addEventListener('message',function(e) {
          $('.main input').value = e.data
      });
      function $(id){
          return document.querySelector(id);
      }
  </script>
</body>
</html>

//b.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            margin: 0;
        }
        input{
            margin: 20px;
            width: 200px;
        }
    </style>
</head>
<body>
<input id="input" type="text"  placeholder="http://localhost:63342/server-mock/b.html">
<script>
    $('#input').addEventListener('input', function(){
        window.parent.postMessage(this.value, '*');
    })
    window.addEventListener('message',function(e) {
        $('#input').value = e.data
    });
    function $(id){
        return document.querySelector(id);
    }
</script>
</body>
</html>