最近由于公司的一個項目需求需要前端解決跨域問題，因此學(xué)習(xí)了下跨域的相關(guān)知識，這里做一個總結(jié)，方便后期查閱。
在講跨域問題之前，首先了解下一個概念——瀏覽器的同源策略（這是瀏覽器的行為）。

什么是瀏覽器同源策略

同源策略（Same origin policy）是一種約定,它的核心就在于它認為自任何站點裝載的信賴內(nèi)容是不安全的。當被瀏覽器半信半疑的腳本運行在沙箱時，它們應(yīng)該只被允許訪問來自同一站點的資源，而不是那些來自其它站點可能懷有惡意的資源。

所謂同源是指：域名、協(xié)議、端口相同。

下表是相對于 http://www.laixiangran.cn/home/index.html 的同源檢測結(jié)果：

圖1.1

另外，同源策略又分為以下兩種：

1. DOM 同源策略：禁止對不同源頁面 DOM 進行操作。這里主要場景是 iframe 跨域的情況，不同域名的 iframe 是限制互相訪問的。
2. XMLHttpRequest 同源策略：禁止使用 XHR 對象向不同源的服務(wù)器地址發(fā)起 HTTP 請求。

為什么要有跨域限制

因為存在瀏覽器同源策略，所以才會有跨域問題。那么瀏覽器是出于何種原因會有跨域的限制呢。其實不難想到，跨域限制主要的目的就是為了用戶的上網(wǎng)安全。

如果瀏覽器沒有同源策略，會存在什么樣的安全問題呢。下面從 DOM 同源策略和 XMLHttpRequest 同源策略來舉例說明：

如果沒有 DOM 同源策略，也就是說不同域的 iframe 之間可以相互訪問，那么黑客可以這樣進行攻擊：

1. 做一個假網(wǎng)站，里面用 iframe 嵌套一個銀行網(wǎng)站 http://mybank.com。
2. 把 iframe 寬高啥的調(diào)整到頁面全部，這樣用戶進來除了域名，別的部分和銀行的網(wǎng)站沒有任何差別。
3. 這時如果用戶輸入賬號密碼，我們的主網(wǎng)站可以跨域訪問到 http://mybank.com 的 dom 節(jié)點，就可以拿到用戶的賬戶密碼了。

如果 XMLHttpRequest 同源策略，那么黑客可以進行 CSRF（跨站請求偽造） 攻擊：

1. 用戶登錄了自己的銀行頁面 http://mybank.com，http://mybank.com 向用戶的 cookie 中添加用戶標識。
2. 用戶瀏覽了惡意頁面 http://evil.com，執(zhí)行了頁面中的惡意 AJAX 請求代碼。
   http://evil.com 向 http://mybank.com 發(fā)起 AJAX HTTP 請求，請求會默認把 http://mybank.com 對應(yīng) cookie 也同時發(fā)送過去。
3. 銀行頁面從發(fā)送的 cookie 中提取用戶標識，驗證用戶無誤，response 中返回請求數(shù)據(jù)。此時數(shù)據(jù)就泄露了。
4. 而且由于 Ajax 在后臺執(zhí)行，用戶無法感知這一過程。

因此，有了瀏覽器同源策略，我們才能更安全的上網(wǎng)。

跨域的解決方法

這里講解幾種比較實用的方法，有另外需求的情況參考本文底部的參考文獻。

CORS（跨域資源共享）

CORS（Cross-origin resource sharing，跨域資源共享）是一個 W3C 標準，定義了在必須訪問跨域資源時，瀏覽器與服務(wù)器應(yīng)該如何溝通。CORS 背后的基本思想，就是使用自定義的 HTTP 頭部讓瀏覽器與服務(wù)器進行溝通，從而決定請求或響應(yīng)是應(yīng)該成功，還是應(yīng)該失敗。

CORS 需要瀏覽器和服務(wù)器同時支持。目前，所有瀏覽器都支持該功能，IE 瀏覽器不能低于 IE10。

整個 CORS 通信過程，都是瀏覽器自動完成，不需要用戶參與。對于開發(fā)者來說，CORS 通信與同源的 AJAX 通信沒有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn) AJAX 請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。

因此，實現(xiàn) CORS 通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實現(xiàn)了 CORS 接口，就可以跨源通信，但是對于攜帶cookie的請求中還是需要再請求頭中添加一些字段的，下面會說到。

瀏覽器將CORS請求分成兩類：簡單請求（simple request）和非簡單請求（復(fù)雜請求）（not-so-simple request）。
只要同時滿足以下兩大條件，就屬于簡單請求。

請求方法是以下三種方法之一：

• HEAD
• GET
• POST
  HTTP的頭信息不超出以下幾種字段：
• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type：只限于三個值 application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同時滿足上面兩個條件，就屬于非簡單請求。

瀏覽器對這兩種請求的處理，是不一樣的。
簡單請求
在請求中需要附加一個額外的 Origin 頭部，其中包含請求頁面的源信息（協(xié)議、域名和端口），以便服務(wù)器根據(jù)這個頭部信息來決定是否給予響應(yīng)。例如：Origin: http://www.laixiangran.cn
如果服務(wù)器認為這個請求可以接受，就在 Access-Control-Allow-Origin 頭部中回發(fā)相同的源信息（如果是公共資源，可以回發(fā) * ）。例如：Access-Control-Allow-Origin：http://www.laixiangran.cn
沒有這個頭部或者有這個頭部但源信息不匹配，瀏覽器就會駁回請求。正常情況下，瀏覽器會處理請求。注意，請求和響應(yīng)都不包含 cookie 信息。
如果需要包含 cookie 信息，ajax 請求需要設(shè)置 xhr 的屬性 withCredentials 為 true，服務(wù)器需要設(shè)置響應(yīng)頭部 Access-Control-Allow-Credentials: true。就像這樣：

 $.ajax({
    type: "POST",
    url: "http://xxx.com/api/test",
    xhrFields: {
         withCredentials: true
    },
    crossDomain: true,
})

非簡單請求
瀏覽器在發(fā)送真正的請求之前，會先發(fā)送一個 Preflight 請求給服務(wù)器，這種請求使用 OPTIONS 方法，發(fā)送下列頭部：

Origin：與簡單的請求相同。
Access-Control-Request-Method: 請求自身使用的方法。
Access-Control-Request-Headers: （可選）自定義的頭部信息，多個頭部以逗號分隔。

簡而言之就是 允許的方法，請求頭和協(xié)議

發(fā)送這個請求后，服務(wù)器可以決定是否允許這種類型的請求。服務(wù)器通過在響應(yīng)中發(fā)送如下頭部與瀏覽器進行溝通：

Access-Control-Allow-Origin：與簡單的請求相同。
Access-Control-Allow-Methods: 允許的方法，多個方法以逗號分隔。
Access-Control-Allow-Headers: 允許的頭部，多個方法以逗號分隔。
Access-Control-Max-Age: 應(yīng)該將這個 Preflight 請求緩存多長時間（以秒表示）。
一旦服務(wù)器通過 Preflight 請求允許該請求之后，以后每次瀏覽器正常的 CORS 請求，就都跟簡單請求一樣了。
優(yōu)點
CORS 通信與同源的 AJAX 通信沒有差別，代碼完全一樣，容易維護。
支持所有類型的 HTTP 請求。

JSONP 跨域

由于 script 標簽不受瀏覽器同源策略的影響，允許跨域引用資源。因此可以通過動態(tài)創(chuàng)建 script 標簽，然后利用 src 屬性進行跨域，這也就是 JSONP 跨域的基本原理。

// 1. 定義一個 回調(diào)函數(shù) handleResponse 用來接收返回的數(shù)據(jù)
function handleResponse(data) {
    console.log(data);
};

// 2. 動態(tài)創(chuàng)建一個 script 標簽，并且告訴后端回調(diào)函數(shù)名叫 handleResponse
var body = document.getElementsByTagName('body')[0];
var script = document.gerElement('script');
script.src = 'http://www.laixiangran.cn/json?callback=handleResponse';
body.appendChild(script);

// 3. 通過 script.src 請求 `http://www.laixiangran.cn/json?callback=handleResponse`，
// 4. 后端能夠識別這樣的 URL 格式并處理該請求，然后返回 handleResponse({"name": "laixiangran"}) 給瀏覽器
// 5. 瀏覽器在接收到 handleResponse({"name": "laixiangran"}) 之后立即執(zhí)行 ，也就是執(zhí)行 handleResponse 方法，獲得后端返回的數(shù)據(jù)，這樣就完成一次跨域請求了。

優(yōu)點
使用簡便，沒有兼容性問題。

postMessage

針對iframe可以postmessage來處理。

服務(wù)器代理

瀏覽器有跨域限制，但是服務(wù)器不存在跨域問題，所以可以由服務(wù)器請求所要域的資源再返回給客戶端。

服務(wù)器代理是萬能的。

參考文獻：

https://www.cnblogs.com/laixiangran/p/9064769.html