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

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

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