跨域簡析

1. 同源策略

同源:

URL由協議、域名、埠和路徑組成，如果兩個URL的協議、域名和埠相同，則表示他們同源。

同源策略:

同源策略是瀏覽器的一種安全機制。總體來說，它就是限制了跨域資源訪問。但是對不同的資源會有些許不同。

• DOM訪問的同源策略:禁止非同源指令碼語言訪問DOM元素。
• XMLHttpRequest的同源策略:禁止ajax請求非同源資源。
• Cookie的同源策略:瀏覽器只會將cookie帶網同源伺服器。
• <script><img><link><iframe>標籤的同源策略:可以跨源載入資源。

2.跨域

由於瀏覽器同源策略的影響，跨域訪問資源受到了限制。由下圖說明哪些環節會受到影響。

1. 瀏覽器正常請求一個9000的html頁面
2. html頁面中的<script>標籤跨域請求js和css資源。（可以跨域載入資源）
3. js用XMLHttpRequest（ajax）請求8080的介面系統。(跨域請求資源失敗)
4. <iframe>標籤跨域載入8888的頁面。（可以跨域載入資源）
5. <iframe>載入的js資源訪問了父頁面的DOM。（跨域訪問失敗）

3.常見解決方案

1)Ajax跨域

• JSONP（回撥函式+資料）

  利用<script>標籤可以跨域請求資源的特性，先用<script>請求資料，再回撥頁面上的回撥函式。

  注意:1.JSONP並沒有使用XMLHttpRequest,JSONP並不是ajax的一個特例。2.它只支援GET請求。

• 跨域資源共享CORS

  它是W3C標準，是跨源AJAX請求的根本解決方法。它允許瀏覽器向跨源伺服器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。
  瀏覽器傳送一個帶有Orgin欄位的HTTP請求頭，用來表明請求來源。伺服器的Access-Control-Allow-Origin響應頭表明該伺服器允許哪些源的訪問，一旦不匹配，瀏覽器就會拒絕資源的訪問。

  一開始我們系統的解決方案就是CORS。

  預檢請求（之前發現每次ajax請求F12都能抓到兩次請求，瀏覽器針對非簡單請求會傳送CORS預檢請求。非簡單請求見連結~簡單請求）。

Proxy反向代理解決問題

nginx作為反向代理伺服器，就是把http請求轉發到另一個或者一些伺服器上。
簡單說，nginx伺服器欺騙了瀏覽器，讓它認為這是同源呼叫，從而解決了瀏覽器的跨域問題。

2)Cookie跨域

跨域資源共享CORS

一般，9000上的js的ajax訪問8080的介面系統時，預設並不帶上8080下發的cookie。需要如下配置：
XMLHttpRequest設定屬性withCredentials = true。服務端配合在響應頭中設定相應的屬性Access-Control-Allow-Credentials。

設定Document.domain

兩個網頁一級域名相同，只是二級域名不同，瀏覽器允許通過設定document.domain共享 Cookie。

反向代理

同上。

3）Iframe跨域

不常見(不做闡述)