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

 

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

報這個錯誤

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

Access-Control-Allow-Origin: * //*代表任何域。也可以指定地址

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

 

同源策略

 

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

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

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

 可以通過這個屬性判斷是否支持跨域：

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

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

Access-Control-Allow-Origin: * //*代表任何域。也可以指定地址

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);
    }

服務器端

 根據學號查詢學生信息的支持跨域接口  http://www.studentl.com/?studentid=""&callback=""

  服務端最終 查詢數據 響應客戶端 這樣的內容requset.queryString["callback"]+"({json數據})“