什么是跨域？你是怎么理解跨域的？服務器端你是怎么處理跨域的？

一、概念

　　當一個請求url的協議、域名、端口三者之間任意一個與當前頁面url不同即為跨域

二、解決跨域問題

【1】設置document.domain解決無法讀取非同源網頁的 Cookie問題
　　因為瀏覽器是通過document.domain屬性來檢查兩個頁面是否同源，因此只要通過設置相同的document.domain，兩個頁面就可以共享Cookie（此方案僅限主域相同，子域不同的跨域應用場景。）

【2】跨文檔通信 API：window.postMessage()

　　　　調用postMessage方法實現父窗口向子窗口發消息（子窗口同樣可以通過該方法發送消息給父窗口）

它可用於解決以下方面的問題：

頁面和其打開的新窗口的數據傳遞
多窗口之間消息傳遞
頁面與嵌套的iframe消息傳遞
上面三個場景的跨域數據傳遞

【3】JSONP

　　JSONP是服務器與客戶端跨源通信的常用方法。最大特點就是簡單適用，兼容性好（兼容低版本IE），缺點是只支持get請求，不支持post請求。

　　　　核心思想：網頁通過添加一個<script>元素，向服務器請求 JSON 數據，服務器收到請求后，將數據放在一個指定名字的回調函數的參數位置傳回來。

 

　　　　①原生實現

<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服務器test.com發出請求，該請求的查詢字符串有一個callback參數，用來指定回調函數的名字
             
// 處理服務器返回回調函數的數據
<script type="text/javascript">
    function dosomething(res){
        // 處理獲得的數據
        console.log(res.data)
    }
</script>
             
                

　　　　②jQuery ajax

$.ajax({
    url: 'http://www.test.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 請求方式為jsonp
    jsonpCallback: "handleCallback",    // 自定義回調函數名
    data: {}
});

　　　　③vue.js

this.$http.jsonp('http://www.domain2.com:8080/login', {
            params: {},
            jsonp: 'handleCallback'
        }).then((res) => {
            console.log(res); 
        })

　　【4】CORS

CORS 是跨域資源分享（Cross-Origin Resource Sharing）的縮寫。它是 W3C 標准，屬於跨源 AJAX 請求的根本解決方法。

1、普通跨域請求：只需服務器端設置Access-Control-Allow-Origin

2、帶cookie跨域請求：前后端都需要進行設置

【前端設置】根據xhr.withCredentials字段判斷是否帶有cookie