理解什麽是同源，跨域

同源：域名、協議、端口完全相同。
跨域：域名、協議、端口有其中的一樣不同。

什麽是同源策略

• 同協議、同domain（或ip）、同端口，視為同一個域，一個域內的腳本僅僅具有本域內的權限。
• 理解：本域腳本只能讀寫本域內的資源，而無法訪問其它域的資源。這種安全限制稱為同源策略。　　

前端解決跨域訪問的常用方式

　　1.jsonp

　　2.iframe 元素會創建包含另外一個文檔的內聯框架（即行內框架）

　　3.代理：如vue-cli項目中的config/index.js文件中的proxyTable設置所要跨域訪問的地址

應用場景

　　1.後臺返會form表單，直接將其放在iframe裏面進行提交，總是顯示請求來源非法

　　解決：將form表單追加在頁面上，並設置為display:none。另外直接使用document.formName.submit()，無法實現表單的提交。

　　　　需要添加setTimeout(function sub() { document.FormSubmit.submit() }, 0)　

　　分析：setTimeout(callback, 0),作用是改變了代碼流，告訴js引擎，在0ms以後把callback放到主事件隊列中，等待表單追加在頁面上後再執行表單提交。

jsonp原理剖析

　　原理：動態創建出script標簽，通過src屬性訪問跨域服務器，獲取到jsonp格式數據。在jsonp獲取之前需要有一個全局的函數用來接收jsonp的數據。

　 封裝函數：

var jsonpService = (function(){
    var getJsonp = function (url,data,cb) {
        var params=‘‘;
        for(var key in data){
            params += key + ‘=‘ + data[key] + "&";
        }
        var jsonpname = "jsonp_"+ Math.random().toString().substring(6);
        window[jsonpname] = function (data) {
            cb(data);
        };
        var script = document.createElement("script");
        script.src = url+‘?‘+params+‘callback=‘+jsonpname;
        document.head.appendChild(script);
    }
    return {
        getJsonp: getJsonp
    }
})();

同源和跨域