使用XHR2或Jsonp實現跨域以及實現原理

時間 2019-11-12

標籤使用 xhr2 xhr jsonp 實現以及原理欄目 JSON 简体版

原文原文鏈接

咱們直接使用XMLHttpRequset請求外部接口會發現

報這個錯誤json

其實瀏覽器成功發送請求並拿回了數據只是瀏覽器的同源策略禁止了獲取在xhr2 服務器端支持跨域須要在響應頭增長跨域

Access-Control-Allow-Origin: * //*表明任何域。也能夠指定地址瀏覽器

Access-Control-Allow-Methods: POST,GET //支持的方法服務器

同源策略

同源策略主要針對XMLHttpRequset 保證請求url 必須跟當前站點的協議域名端口一致cookie

XHR2 CORS（跨域資源共享）實現跨域請求

XHRWidtCredentils 跨域請求是否包含cookie 票據等憑證(不常使用見)

能夠經過這個屬性判斷是否支持跨域：

if(new XHRHttpRequset().XHRWidtCredentils==undefied)return false;

服務器端響應接口須要加上這2個響應頭頭

Access-Control-Allow-Origin: * //*表明任何域。也能夠指定地址app

Access-Control-Allow-Methods: POST,GET //支持的方法函數

    window.onload = function () {
        var xhr = new XMLHttpRequest();
        if (xhr.withCredentials === undefined) return false;

        xhr.open("get", "http://www.baidu.com");
        xhr.onreadystatechange = function () {
            if (xhr.readyState !== 4) return;//忽略未完成的調用
            if (xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }
        xhr.send(null);
    }

JsonP實現跨域請求

服務器端支持：返回數據格式必須是calback({json數據}) callback必須是請求客戶端存在的回調函數

瀏覽器端：

經過建立script標籤請求外部資源沒有同源策略限制

支持跨域請求的服務端響應數據爲callback({json數據}) 看成爲js解析則正好調用了咱們的回調函數

例子：

客戶端

    function GetJsonp(url, callback) {

        var responseCallback = callback.name + GetJsonp.index++;//爲每次調用生成一個惟一的回調名字
        var scriptDom = document.createElement("script");//建立一個script標籤
        //生成一個隨機的 服務器端回調函數
        GetJsonp[responseCallback] = function (data) {
            try {
                //最終回調咱們本身的處理函數
                callback(data);
            } finally {
                //每次請求完成後函數
                document.removeChild(scriptDom);//刪除標籤
                delete GetJsonp[responseCallback];//刪除生成的函數
            }
        }
      

        if (url.indexof("?") === -1) {
            //若是url沒有包含參數 則添加服務器端生成回調的函數
            url += "?callback=" + "GetJsonp[" + responseCallback + "]";
        } else {
            //僅僅是追加參數
            url += "&callback=" + "GetJsonp[" + responseCallback + "]";
        }
        //設置script標籤的請求地址
        scriptDom.src = url;
        //將他追加到文檔
        document.appendChild(scriptDom);
    }