JS跨域方法及原理 - amywechat－IT工程師數位筆記本

文章出處

JS跨域分析判斷

　　JS跨域：在不同域之間，JS進行數據傳輸或通信。比如ajax向不同的域請求數據、JS獲取iframe中的頁面中的值（iframe內外不同域）

　　只要協議、端口、域名有一個不同則被當做不同的域

　　下表給出了相對于http://www.dmeiyang.com同源檢測結果：

Jsonp跨域方法及原理

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

　　引入不同JS文件實現

　　在http://localhost:2014站點中有一個頁面，現在需要請求http://localhost:2013/CrossDomain/GetJsonpData的數據。很明顯這兩不在一個域上，為了實現這個功能，我們可以這樣寫代碼：

<script type="text/javascript">
    function dosomething(jsondata) {
        console.log(jsondata);
    }
</script>
<script src="http://localhost:2013/CrossDomain/GetJsonpData?jsoncallback=dosomething"></script>

　　這里我們看到在請求地址后面有一個jsoncallback參數，慣例是使用callback這個參數名，但是如果http://localhost:2013這個站點不是你自己能控制的，就只能按照提供數據那一方的規定格式來操作了

　　下面是http://localhost:2013/CrossDomain/GetJsonpData定義的規則和返回數據

public string GetJsonpData(string jsoncallback)
{
    //返回數據格式：jsoncallback({"Name":"dmeiyang","Age":20})

    System.Text.StringBuilder sb = new System.Text.StringBuilder();

    sb.Append(jsoncallback);
    sb.AppendFormat("({0})", new { Name = "dmeiyang", Age = 20 }.ToJsonByJsonNet());

    return sb.ToString();
}

　　通過JQuery實現

　　后臺代碼不變，前臺部分代碼如下：

<div id="container">
    <div>我要訪問http://localhost:2013站點的數據</div>
    <div>
        <a class="at-jsonp" href="javascript:void(0);">點擊一下，給我數據~</a>
    </div>
    <div>
        <span>其他站點數據：</span>
        <span class="data-jsonp" style="color: red"></span>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#container .at-jsonp').on('click', function () {
            $.ajax({
                async: false,
                url: "http://localhost:2013/CrossDomain/GetJsonpData",
                type: "GET",
                dataType: 'jsonp',
                //jsonp的值自定義,如果使用jsoncallback,那么服務器端,要返回一個jsoncallback的值對應的對象. 
                jsonp: 'jsoncallback',
                //要傳遞的參數,沒有傳參時，也一定要寫上 
                data: { jsoncallback: "jsoncallback" },
                timeout: 5000,
                //返回Json類型 
                contentType: "application/json;utf-8",
                //服務器段返回的對象包含name,data屬性. 
                success: function (result) {
                    $('#container .data-jsonp').text('名稱：' + result.Name + '-->年齡：' + result.Age);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(textStatus);
                }
            });
        })
    })
</script>

通過修改document.domain來跨子域

　　瀏覽器遵循同源策略。第一個限制是：不能通過ajax請求不同域下的數據（除非使用Jsonp）；第二個限制是：不同域框架（iframe內外）之間不能進行js交互

　　例如：http://localhost:2014頁面（A頁）中放置一個iframe，讓其加載http://localhost:2013/CrossDomain/iframetest頁面（B頁）。因為兩者不同域，所以A頁面是無法通過JS獲取B頁面里的內容的（當然你可以獲取一個幾乎無用的window對象）

　　為了實現上述情況兩個頁面之間可以互相調取數據，需要設置document.domain=“自身或者更高一級的父域”（兩個頁面都需要設置）

文章列表