進階13-跨域

題目1： 什么是同源策略

  • 瀏覽器出于安全方面的考慮，只允許與本域下的接口交互。不同源的客戶端腳本在沒有明確授權(quán)的情況下，不能讀寫對方的資源。
  • 同源是指：
    1.同協(xié)議：如都是http或者https
    2.同域名：如都是http://jirengu.com/a 和http://jirengu.com/b
    3.同端口：如都是80端口

題目2： 什么是跨域？跨域有幾種實現(xiàn)形式

  • 跨域就是在不同本域下的接口進行交互。
  • 跨域的實現(xiàn)形式有：
    1.JSONP。
    2.CORS。
    3.降域。
    4.postMessage。

題目3： JSONP 的原理是什么

  • JSONP的原理是利用例如<script>中的"src"這個屬性，這個屬性可以不受瀏覽器的同源策略限制進行跨域，不過需要后端支持。
  • 具體步驟：
    1.定義數(shù)據(jù)處理函數(shù)_fun
    2.創(chuàng)建script標簽，src的地址執(zhí)行后端接口，最后加個參數(shù)callback=_fun
    3.服務(wù)端在收到請求后，解析參數(shù)，計算返還數(shù)據(jù)，輸出 fun(data) 字符串。
    4..fun(data)會放到script標簽做為js執(zhí)行。此時會調(diào)用fun函數(shù)，將data做為參數(shù)。

題目4： CORS是什么

  • CORS 全稱是跨域資源共享（Cross-Origin Resource Sharing），是一種 ajax 跨域請求資源的方式，支持現(xiàn)代瀏覽器，IE支持10以上。 實現(xiàn)方式很簡單，當(dāng)你使用 XMLHttpRequest 發(fā)送請求時，瀏覽器發(fā)現(xiàn)該請求不符合同源策略，會給該請求加一個請求頭：Origin，后臺進行一系列處理，如果確定接受請求則在返回結(jié)果中加入一個響應(yīng)頭：Access-Control-Allow-Origin; 瀏覽器判斷該相應(yīng)頭中是否包含 Origin 的值，如果有則瀏覽器會處理響應(yīng)，我們就可以拿到響應(yīng)數(shù)據(jù)，如果不包含瀏覽器直接駁回，這時我們無法拿到響應(yīng)數(shù)據(jù)。所以 CORS 的表象是讓你覺得它與同源的 ajax 請求沒啥區(qū)別，代碼完全一樣。

題目5： 根據(jù)視頻里的講解演示三種以上跨域的解決方式 ，寫成博客

  • JSONP前端
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>news</title>
<style>
  .container{
    width: 900px;
    margin: 0 auto;
  }
</style>
</head>
<body>
  <div class="container">
    <ul class="news">
      <li>第11日前瞻：中國沖擊4金 博爾特再戰(zhàn)</li>
      <li>男雙力爭會師決賽 </li> 
      <li>女排將死磕巴西！</li>
    </ul>
    <button class="change">換一組</button>
  </div>
  
<script>
  
  $('.change').addEventListener('click', function(){
    var script = document.createElement('script');
    script.src = 'http://127.0.0.1/getNews?callback=appendHtml';//創(chuàng)建一個<script>標簽，并且設(shè)置它的src屬性為需要請求的地址，設(shè)置返回的包裹函數(shù)名字為appendHtml.
    document.head.appendChild(script);
    document.head.removeChild(script);//在head中添加這個標簽，運行之后再刪除，以免重復(fù)點擊增加代碼行數(shù)
  })
  function appendHtml(news){
    var html = '';
    for( var i=0; i<news.length; i++){
      html += '<li>' + news[i] + '</li>';
    }//在數(shù)據(jù)到來之前先設(shè)置好函數(shù)的內(nèi)容，讓數(shù)據(jù)到來之后便直接運行。
    console.log(html);
    $('.news').innerHTML = html;
  }
  function $(id){
    return document.querySelector(id);
  }
</script>
</html>
  • JSONP后端
app.get('/getNews', function(req, res){

    var news = [
        "第11日前瞻：中國沖擊4金 博爾特再戰(zhàn)200米羽球",
        "正直播柴飚/洪煒出戰(zhàn) 男雙力爭會師決賽",
        "女排將死磕巴西！郎平安排男陪練模仿對方核心",
        "沒有中國選手和巨星的110米欄 我們還看嗎？",
        "中英上演奧運金牌大戰(zhàn)",
        "博彩賠率挺中國奪回第二紐約時報：中國因?qū)κ址幎鴣G失的獎牌最多",
        "最“出柜”奧運？同性之愛閃耀里約",
        "下跪拜謝與洪荒之力一樣 都是真情流露"
    ]
    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;//在請求到來的時候確認是否需要包裹函數(shù)，也就是后端需要配合的地方。
    if(cb){
        res.send(cb + '('+ JSON.stringify(data) + ')');
    }else{
        res.send(data);
    }   
})
  • JSONP主要思路就是利用<script>標簽的src屬性不受同源策略的限制來進行跨域?？梢岳斫鉃榇舐纷卟煌ǎ硗庾咭粭l小路來到達目的地?？梢灾苯訉SONP封裝成一個函數(shù)，以便反復(fù)調(diào)用，與AJAX使用方法類似，但是原理完全不同。
function jsonp(url,data,callback){
    var script = document.createElement('script');//創(chuàng)建一個script標簽
    url = url + "?callback=" + callback;//拼接回調(diào)函數(shù)名字
    if(data){
        for(key in data){
                url = url + "&" + key + "=" + data[key];//如果有需要的參數(shù)輸入，將參數(shù)也拼接進url
            }
    }
    script.src = url；
    document.head.appendChild(script);//創(chuàng)建script標簽發(fā)送請求。
    document.head.removeChild(script);//完成之后刪除窗前的script標簽。
}
function callback(){
    data[1] = ...........
}
  • CORS前端寫法，與ajax沒有區(qū)別，區(qū)別主要在于后端
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>news</title>
<style>
  .container{
    width: 900px;
    margin: 0 auto;
  }
</style>
</head>
<body>
  <div class="container">
    <ul class="news">
      <li>第11日前瞻：中國沖擊4金 博爾特再戰(zhàn)</li>
      <li>男雙力爭會師決賽 </li> 
      <li>女排將死磕巴西！</li>
    </ul>
    <button class="change">換一組</button>
  </div>
  
<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>
</html>
  • CORS后端寫法，需要在返回數(shù)據(jù)的響應(yīng)頭前加上"Access-Control-Allow-Origin"，并且寫上允許的地址，如果寫"*",則表示允許所有地址從這里獲得數(shù)據(jù)?？梢岳斫鉃榇舐繁徽系K封鎖，疏通障礙之后再走。缺點是只有ie10以上的瀏覽器才會兼容。
app.get('/getNews', function(req, res){

    var news = [
        "第11日前瞻：中國沖擊4金 博爾特再戰(zhàn)200米羽球",
        "正直播柴飚/洪煒出戰(zhàn) 男雙力爭會師決賽",
        "女排將死磕巴西！郎平安排男陪練模仿對方核心",
        "沒有中國選手和巨星的110米欄 我們還看嗎？",
        "中英上演奧運金牌大戰(zhàn)",
        "博彩賠率挺中國奪回第二紐約時報：中國因?qū)κ址幎鴣G失的獎牌最多",
        "最“出柜”奧運？同性之愛閃耀里約",
        "下跪拜謝與洪荒之力一樣 都是真情流露"
    ]
    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.header("Access-Control-Allow-Origin", "*"); 
    res.send(data);
})
  • window.postMessage() 方法提供了一種受控機制來規(guī)避同源策略限制，只要正確的使用，這種方法就很安全。它可以讓一個特定的地址（第二個參數(shù)，如果寫"*"則表示所有地址都允許）來獲取某個參數(shù)（第一個參數(shù)）。
  • postMessage——a.html
<html>
<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>

<div class="ct">
    <h1>使用postMessage實現(xiàn)跨域</h1>
    <div class="main">
        <input type="text" placeholder="http://a.jrg.com:8080/a.html">
    </div>

    <iframe src="http://localhost:8080/b.html" frameborder="0" ></iframe>

</div>


<script>
//URL: http://a.jrg.com:8080/a.html
$('.main input').addEventListener('input', function(){
    console.log(this.value);
    window.frames[0].postMessage(this.value,'*');
})
window.addEventListener('message',function(e) {
        $('.main input').value = e.data
    console.log(e.data);
});
function $(id){
    return document.querySelector(id);
}
</script>
</html>
  • postMessage——b.html

<html>
<style>
    html,body{
        margin: 0;
    }
    input{
        margin: 20px;
        width: 200px;
    }
</style>

    <input id="input" type="text"  placeholder="http://b.jrg.com:8080/b.html">
<script>
// URL: http://b.jrg.com:8080/b.html
 
$('#input').addEventListener('input', function(){
    window.parent.postMessage(this.value, '*');
})
window.addEventListener('message',function(e) {
        $('#input').value = e.data
    console.log(e.data);
});
function $(id){
    return document.querySelector(id);
}   
</script>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 什么是同源策略 同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如...
    饑人谷_嚴琰閱讀 272評論 0贊 0
  • 1.什么是同源策略？ 同源策略是指，瀏覽器出于安全方面的考慮，只允許與本域下的接口交互。不同源的客戶端腳本在沒有明...
    upup_dayday閱讀 209評論 0贊 0
  • 題目1： 什么是同源策略 瀏覽器出于安全方面的考慮，只允許與本域下的接口交互。不同源的客戶端腳本在沒有明確授權(quán)的情...
    cheneyzhangch閱讀 262評論 0贊 0
  • 什么是同源策略 一個源的定義如果協(xié)議，端口（如果指定了一個）和域名對于兩個頁面是相同的，則兩個頁面具有相同的源。同...
    Maaaax閱讀 180評論 0贊 0
  • 張藝興玩了最近很火的一個網(wǎng)游，開了一個人妖號，取名叫 菠蘿油好吃 一出新手村就被一個滿級的大神勾搭了：會煎蛋的龍 ...
    Mr_YIxing閱讀 1,021評論 0贊 0

友情鏈接更多精彩內(nèi)容