5分鐘幫後端開發搞清楚跨域問題

1、什麼是跨域問題

要說清楚什麼是跨域問題必須得先搞清楚，什麼叫作瀏覽器的同源策略，簡單來講就是假如兩個地址的協議、端口、主機有一個不同，那麼瀏覽器就會限制這兩個地址的資源交互。這樣作的好處是處於安全考慮，能夠避免CSRF攻擊。

2、存在問題

項目開發中常常會遇到一個前端頁面會從多個不一樣的域名請求資源，同源策略會進行限制，致使請求失敗，那麼如何繞過呢。這裏咱們不去討論一些前端的作法，因爲本人是後端開發，重點講下須要後端參與的CORS解決跨域問題。

3、CORS

CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）

瀏覽器將跨域請求分爲兩種：簡單請求和非簡單請求。

3.1簡單請求

只要同時知足如下兩大條件，就屬於簡單請求。

當瀏覽器發出的跨域請求爲簡單請求時，瀏覽器會自動在頭中添加 origin字段，表示這次請求的源，在後端收到請求後，若容許這次跨域請求，則須要在相應頭中添加以下字段：

Access-Control-Allow-Origin

此字段的值爲請求的源，或者用*表明容許全部跨域請求

Access-Control-Allow-Credentials

此字段可選 true表明容許發送cookie，注意當此字段爲true時，Access-Control-Allow-Origin不可爲*不然報錯。

當瀏覽器收到帶有上述的響應頭時便知道這次跨域請求是被容許的。

3.2非簡單請求

不知足簡單請求的條件便爲非簡單請求。 非簡單請求的特殊之處是會發送一個預檢請求，用於在正式通訊前確認後端是否容許，預檢請求會帶上以下字段：

Access-Control-Request-Method

該字段是必須的，用來列出瀏覽器的CORS請求會用到哪些HTTP方法，如PUT等

Access-Control-Request-Headers

當請求須要在請求頭中發送自定義的頭字段時，此字段會攜帶上自定義的頭字段名稱

後端接受到預檢請求並容許跨域處理時，須要在響應頭上加上以下字段：

Access-Control-Allow-Methods

必填，返回全部支持的請求方法

Access-Control-Allow-Headers

當請求頭包括Access-Control-Request-Headers時，此字段必填，返回全部支持的請求頭信息字段

Access-Control-Allow-Credentials

上面說過了，再也不重複

Access-Control-Max-Age

可選字段，指定預檢請求的有效期，在此段週期內不須要重複預檢。

當預檢請求經過後，便與簡單請求類似處理便可。