web前端 -- Ajax同源策略以及解決跨域問題

根據千峯教育學習視頻所練習的筆記 | 學習一段時間，我也有寫一點東西的必要了···

1. Ajax的同源策略

源是指協議、域名和端口號。
同源策略：是瀏覽器的一種安全機制。

也就是說，當腳本運行時，瀏覽器會檢測它所執行的腳本以及它取得的數據與咱們的HTML頁面所在的源是否相同。就是說咱們請求數據的協議、端口號以及域名與咱們HTML的協議、域名、端口號是否一致。一致就認爲ok,是同源的，它就會進行成功的請求。若它們的源不一致，這個時候就是跨域的請求。
默認狀況下，瀏覽器是不支持跨域請求的

2. 解決跨域問題

2.1. JSONP

咱們知道，Ajax的執行會受到同源策略限制，由於腳本運行時發送數據，它（瀏覽器）會檢測請求數據的域名、協議和端口號。那麼，script標籤時不受同源策略限制（在請求script腳本的時候，不管腳本是HTML所在服務器仍是在其餘服務器，它都能請求），咱們就能用script的這一性質來進行數據請求。

2.1.1. 利用script進行數據請求

舉個栗子：

1）如今個人腳本中定義一個getData的函數,而且定義了形參data，將數據簡單輸出。

<script>
    function getData(data){
        consle.log(data);
    }
</script>

2）若是如今我請求了一個腳本，腳本能調用個人getData，而且把數據做爲實參傳遞進來。那個人形參接收到數據就能夠進行相應的處理了。接下來模擬一下這個過程。

假定我有一個jsonp.js，如今前端把函數名告訴了後端，後端在jsonp.js文件裏就能調用data，而且在這兒傳遞一個數據。

getData({
    name:'feifei',
    age:'9'
})

3）回到剛剛的script裏，咱們能請求jsonp.js文件。

<script>
    function getData(data){
        console.log(data);
    }
    var script = document.createElement('script');//動態建立script標籤
    script.id = "jsonp";
    script.src = "./jsonp.js";//將script標籤的src指向當前路徑下的jsonp
    document.body.appendChild(script);
</script>

這種方式咱們就獲得想要的數據了，而且它不受同源策略的限制。

2.2. CORS

CORS全稱是跨域資源共享，是通常瀏覽器都支持的功能。整個CORS通訊過程都有瀏覽器自動完成，不須要用戶參與。對於前端開發者來講，發送CORS的Ajax和發送普通的Ajax沒有什麼區別。實現CORS通訊的關鍵在服務器端，只要服務器實現了CORS接口就能夠跨域通訊。