JSONP_跨域

題目1： 什么是同源策略

瀏覽器出于安全考慮，只允許與本域下的接口交互。不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方的資源。
本域指的是？

題目2： 什么是跨域？跨域有幾種實現形式
  • 概念：只要協議、域名、端口有任何一個不同，都被當作是不同的域。
  • 跨域的實現形式：
  • 通過jsonp跨域
  • CORS跨域資源共享
  • 通過修改document.domain來跨子域
  • postMessage
題目3： JSONP 的原理是什么

在js中，我們直接用XMLHttpRequest請求不同域上的數據時，是不可以的。但是，在頁面上引入不同域上的js腳本文件卻是可以的，jsonp正是利用這個特性來實現的。
例如：

<script type="text/javascript">
function dosomething(jsondata){
//處理獲得的json數據
}
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>
js文件載入成功后會執行我們在url參數中指定的函數，并且會把我們需要的json數據作為參數傳入。所以jsonp是需要服務器端的頁面進行相應的配合的。

```javaScript
<?php
$callback = $_GET['callback'];//得到回調函數名
$data = array('a','b','c');//要返回的數據
echo $callback.'('.json_encode($data).')';//輸出
?>
最終，輸出結果為：dosomething(['a','b','c']);
題目4： CORS是什么

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

題目5： 演示三種以上跨域的解決方式 ，寫成博客

方法一、jsonp

  • 基本步驟
    1.定義數據處理函數_fun
    2.創建script標簽，src的地址執行后端接口，最后加個參數callback=_fun
    3.服務端在收到請求后，解析參數，計算返還數據，輸出 fun(data) 字符串。
    4.fun(data)會放到script標簽做為js執行。此時會調用fun函數，將data做為參數。
  • 演示:
<!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金 博爾特再戰</li>
        <li>男雙力爭會師決賽 </li>
        <li>女排將死磕巴西！</li>
    </ul>
    <button class="change" id="change">換一組</button>
</div>
<script>
    $(".change").onclick=function () {
       var cscript = document.createElement('script');
        cscript.src = "http:127.0.0.1:3000/getNews?callback=appendHtml";//*此處地址為絕對路徑,改路徑返回內容為 appendHtml(參數)；
        document.head.appendChild(cscript);
        document.head.removeChild(cscript);
    }
    function appendHtml(data){
        var html ="";
        for(var i = 0;i<data.length;i++){
            html+="<li>"+data[i]+"</li>"
        }
        $(".news").innerHTML=html;
    }
    function $(id) {
        return document.querySelector(id);
    }
</script>
</html>

//mock-sever router.js
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);
    }
    var cb = req.query.callback;//appendHtml
    if(cb){
       res.send(cb+"("+JSON.stringify(data)+")");
    }else{
        res.send(data);
    }
})

js文件載入成功后會執行我們在url參數中指定的函數(以上例子中為dosomething)，并且會把我們需要的json數據作為參數傳入。所以jsonp是需要服務器端的頁面進行相應的配合的。

方法二：cors（原理題目3已介紹，不再贅述）

演示：

<!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金 博爾特再戰</li>
        <li>男雙力爭會師決賽 </li>
        <li>女排將死磕巴西！</li>
    </ul>
    <button class="change">換一組</button>
</div>
<script>
      $('.change').addEventListener('click', function(){
        var xhr = new XMLHttpRequest();
         xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                appendHtml( JSON.parse(xhr.responseText) )
            }
        };
        xhr.open('get', 'http://localhost:3000/getNews', true);//注：mock start --port=3000;
        xhr.send();
  })
  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>

//mock =>router.js
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://localhost:8080");//僅支持http://localhost:8080的請求 
  // res.header("Access-Control-Allow-Origin", "*");//支持全部
    res.send(data);
})

CORS與JSONP的使用目的相同，但是比JSONP更強大。
JSONP只支持GET請求，CORS支持所有類型的HTTP請求。JSONP的優勢在于支持老式瀏覽器，以及可以向不支持CORS的網站請求數據。

方法三：通過修改document.domain來跨子域

由于同源政策，不同的框架之間是可以獲取window對象的，但卻無法獲取相應的屬性和方法；這個時候，document.domain就可以派上用場了，我們只要把涉及的兩個頁面的document.domain都設成相同的域名就可以了。但要注意的是，document.domain的設置是有限制的，我們只能把document.domain設置成自身或更高一級的父域，且主域必須相同。
演示：
1.找到C:\Windows\System32\Drivers\etc\hosts
將hosts，更改添加域名

# localhost name resolution is handled within DNS itself.
#   127.0.0.1       localhost
#   ::1             localhost//注：打開內容截至這里
127.0.0.1       jrg.com//注：直接添加，注意前面沒有#
127.0.0.1      b.jrg.com
127.0.0.1      a.jrg.com

window系統會有緩存 命令行執行ipconfig /flushdns 清理DNS緩存

2.建立兩個頁面a.html /b.html;并設定相同的document.domain

// http://a.jrg.com:3000/a.html
<html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<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>使用降域實現跨域</h1>
    <div class="main">
        <input type="text" placeholder="http://a.jrg.com:8080/a.html">
    </div>
    <iframe src="http://b.jrg.com:3000/b.html" frameborder="0" ></iframe>//注：mock start --port=3000
</div>
<script>
    //URL: http://a.jrg.com:3000/a.html
    document.querySelector('.main input').addEventListener('input', function(){
        console.log(window.frames[0].window);
        window.frames[0].document.querySelector('input').value = this.value;
    });
    document.domain = "jrg.com"http://document.domain設置為父域
</script>
</html>

//http://b.jrg.com:3000/b.html 頁面
<html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<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:3000/b.html
  document.querySelector('#input').addEventListener('input', function(){
        window.parent.document.querySelector('input').value = this.value;
    })
 document.domain = 'jrg.com';//document.domain設置為父域
</script>
</html>

3.mock start --port=3000;打開a.jrg.com:3000/a.html查看效果。

方法四：window.postMessage(message,targetOrigin)

window.postMessage(message,targetOrigin) 方法是html5新引進的特性，可以使用它來向其它的window對象發送消息，無論這個window對象是屬于同源或不同源，目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經支持window.postMessage方法。

//URL: http://a.jrg.com:3000/a.html
<!doctype html>
<html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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實現跨域</h1>
<div class="main">
<input type="text" placeholder="http://a.jrg.com:8080/a.html" id="ainput">
</div>
<iframe src="http://b.jrg.com:3000/b.html" frameborder="0" ></iframe>
</div>
<script>
//URL: http://a.jrg.com:3000/a.html
ainput.addEventListener('input',function () {
var val = this.value;
window.frames[0].postMessage(val,"*");
});
window.addEventListener('message',function (e) {
ainput.value=e.data;
})
</script>
</html>

```javaScript
    // URL: http://b.jrg.com:3000/b.html
<!doctype html>
<html>
<style>
    html,body{
        margin: 0;
    }
    input{
        margin: 20px;
        width: 200px;
    }
</style>
<input id="binput" type="text"  placeholder="http://b.jrg.com:8080/b.html">
<script>
    // URL: http://b.jrg.com:3000/b.html
    binput.addEventListener('input',function () {
        var val = this.value;
        window.parent.postMessage(val,"*");
    });
    window.addEventListener('message',function (e) {
        binput.value=e.data;
    })
</script>
</html>

參考
詳解js跨域問題
wikipedia-JSONP
wikipedia-CORS

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 228,333評論 6贊 531
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 98,491評論 3贊 416
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事?！?“怎么了？”我有些...
    開封第一講書人閱讀 176,263評論 0贊 374
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 62,946評論 1贊 309
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,708評論 6贊 410
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 55,186評論 1贊 324
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,255評論 3贊 441
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,409評論 0贊 288
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 48,939評論 1贊 335
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,774評論 3贊 354
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,976評論 1贊 369
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,518評論 5贊 359
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,209評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,641評論 0贊 26
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,872評論 1贊 286
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,650評論 3贊 391
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 47,958評論 2贊 373

推薦閱讀更多精彩內容

  • 1.什么是同源策略 同源策略(Same origin Policy)：瀏覽器出于安全方面的考慮，只允許與本域下的接...
    hellowade閱讀 191評論 0贊 0
  • 同源策略(Same origin Policy) 解析瀏覽器出于安全考慮，只允許與同域下的接口進行資源交互。不同域...
    jrg_memo閱讀 263評論 0贊 0
  • 題目1： 什么是同源策略 瀏覽器出于安全方面的考慮，只允許與本域下的接口交互。不同源的客戶端腳本在沒有明確授權的情...
    GaoYangTongXue丶閱讀 280評論 0贊 0
  • 什么是同源策略 瀏覽器出于安全方面的考慮，只允許與本域下的接口交互。不同源的客戶端腳本在沒有明確授權的情況下，不能...
    jamesXiao_閱讀 207評論 0贊 0
  • 1需要注意的是: 對于當前頁面來說頁面存放的 JS 文件的域不重要，重要的是加載該 JS 頁面所在什么域 題目2：...
    李永州的FE閱讀 309評論 0贊 0