跨域問題的根本解決方案CORS

介紹

關於跨域問題有不少的解決方案，這裏咱們總結一下目前最通用最強大的解決方案：CORS。

W3C 的 Web 工做組推薦了一種新的機制，即跨域資源共享（Cross-origin Resource Sharing），簡稱CORS。其實這個機制就是實現了跨站訪問控制，使得安全地進行跨站數據傳輸成爲可能。

跨源資源共享標準( cross-origin sharing standard) 使得如下場景可使用跨站 HTTP 請求：

1. 使用 XMLHttpRequest 或 Fetch發起跨站 HTTP 請求。
2. Web 字體 (CSS 中經過 @font-face 使用跨站字體資源)，所以，網站就能夠發佈 TrueType 字體資源，並只容許已受權網站進行跨站調用。
3. WebGL 貼圖
4. 使用drawImage繪製
5. Images/video 畫面到canvas.
6. 樣式表（使用 CSSOM）
7. Scripts (for unmuted exceptions)

CORS分爲簡單請求和複雜請求，處理方法也是有不一樣的，因此咱們分別總結。

簡單請求

什麼是簡單請求呢？同時知足如下兩個條件，就是簡單請求：

1. 請求是下列之一：
   HEAD
GET
POST
2. HTTP的頭信息不超出如下幾種字段：
   Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

實現方法很是簡單，只須要把服務器的響應報文裏的Access-Control-Allow-Origin設置爲*或者包含由 Origin指明的站點。

Access-Control-Allow-Origin是HTTP響應報文中的一個字段，Origin是HTTP請求報文中的以一個字段,若是不清楚這兩個字段的話，能夠自行查閱關於HTTP報文的知識，好比HTTP | MDN。

複雜請求

若是不是簡單請求，那就是複雜請求，好比請求的方法是PUT或者DELETE，好比Content-Type字段的類型是application/json，好比設置了自定義頭信息。

複雜請求就是比簡單請求多了個預檢請求（preflight）而已。

預檢請求就是瀏覽器先詢問服務器，當前網頁所在的域名是否在服務器的許可名單之中，以及可使用哪些HTTP動詞和頭信息字段。只有獲得確定答覆，瀏覽器纔會發出正式的XMLHttpRequest請求，不然就報錯。

預檢請求用的請求方法是OPTIONS，表示這個請求是用來詢問的。頭信息裏面，關鍵字段是Origin，表示請求來自哪一個源。除了Origin字段，還有兩個字段很是重要：Access-Control-Request-Method和Access-Control-Request-Headers，分別表示容許的請求方法和請求頭。

舉一個具體的例子：

如今，咱們有一個頁面向服務器發送了一個POST請求，而且咱們本身定義了一個請求頭字段My-HEADER，這時候瀏覽器就會首先發送一個OPTION請求來作預檢請求，請求頭裏有如下字段：

Access-Control-Request-Method: POST
Access-Control-Request-Headers: My-HEADER

若是預檢請求成功的話，響應頭裏的內容以下：

Access-Control-Allow-Origin: http://example.com //代表服務器容許http://example.com的請求
Access-Control-Allow-Methods: POST, GET, OPTIONS //代表服務器能夠接受POST, GET和 OPTIONS的請求方法
Access-Control-Allow-Headers: My-HEADER //傳遞一個可接受的自定義請求頭列表
Access-Control-Max-Age: 3000000 //告訴瀏覽器，本次預檢請求的響應結果有效時間是多久

總結

以上就是CORS方法解決跨域問題的流程，CORS支持全部類型的HTTP請求，是目前跨域問題的根本解決方案。