跨域問題之 CORS

介紹

CORS 全稱 Cross-Origin Resource Sharing，中文翻譯爲 跨域資源共享。 CORS 能夠看作web服務器和瀏覽器之間的協議， web服務器聲明限制內容，瀏覽器解析並實施限制。

web服務器 -> 我容許來自 http://www.a.com/ 的 ajax 請求
瀏覽器 -> 曉得了

web服務器聲明限制使用的方式是，在 response 中添加對應的 header。好比：

Access-Control-Allow-Origin: http://www.a.com/

上面的 header 表示容許來自 http://www.a.com/ 的訪問。 origin 指 http 請求發成的站點的 domain。好比，ajax 是從 http://www.a.com/home.html 發出，那麼 origin 就是 http://www.a.com/ 。

具體的交互過程（簡單請求）：

client            browser                        web server
   |    -> ajax      |           ->http request      |
   |               check headers <-http response     |

瀏覽器檢查 header 發現容許訪問，則將數據交付給 ajax，不然丟掉結果。

能夠爲不一樣的 API 設置不一樣的 response header，因此， CORS 的控制粒度能夠精準到 API 級別。

兩種請求

僅僅是編寫前端代碼，那麼讀到這裏就能夠結束了。你只須要知道， CORS 是跨域訪問服務器資源的最好的解決方案（jsonp走開），主流瀏覽器對於 CORS 都有很好的支持能夠放心使用。並且對於現有後臺服務的升級，不少時候只須要再加一層反向代理（nginx 在 response 返回客戶端前追加一層 CORS 相關的 header）。

若是還想深刻，那麼繼續。

瀏覽器將 CORS 請求分爲兩類，簡單請求和非簡單請求，上面的流程介紹的是簡單請求。

簡單請求

知足下述全部條件的才能夠稱爲簡單請求。

使用下列方法之一：

• GET
• HEAD
• POST

Fetch 規範定義了對 CORS 安全的首部字段集合，不得人爲設置該集合以外的其餘首部字段。該集合爲：

• Accept
• Accept-Language
• Content-Language
• Content-Type （須要注意額外的限制）
• DPR
• Downlink
• Save-Data
• Viewport-Width
• Width

Content-Type 的值僅限於下列三者之一：

• text/plain
• multipart/form-data
• application/x-www-form-urlencoded

非簡單請求

對於非簡單請求，瀏覽器會首先發出一個預檢請求: HTTP OPTIONS 方法發起一個預檢請求到服務器，以獲知服務器是否容許該實際請求。這樣作的目的是保護服務器的數據不會被影響。

當請求知足下述任一條件時，即應首先發送預檢請求：

使用了下面任一 HTTP 方法：

• PUT
• DELETE
• CONNECT
• OPTIONS
• TRACE
• PATCH

人爲設置了對 CORS 安全的首部字段集合以外的其餘首部字段。該集合爲：

• Accept
• Accept-Language
• Content-Language
• Content-Type (but note the additional requirements below)
• DPR
• Downlink
• Save-Data
• Viewport-Width
• Width

Content-Type 的值不屬於下列之一:

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

cookie

CORS 請求默認不會攜帶 cookie，須要顯示開啓。

xmlHTTP.open('GET', url, true);
xmlHTTP.withCredentials = true;

若是攜帶 cookie，web服務器的CORS header 不能配置爲

Access-Control-Allow-Origin: *

這可能是爲了防止惡意網站盜取用戶信息。

關於 CORS 的詳細資料和文章

下面是更好的關於 CORS 的知識文章，拋磚引玉。

• Access_control_CORS
• 跨域資源共享 CORS 詳解
• Using CORS