前端：何爲跨域，如何跨域

關鍵詞

同源策略
瀏覽器設計的一個功能限制
CORS
突破同源策略的一個方法
JSONP
IE時代的補救辦法

同源策略

（一）同源的定義：

• 源：源 = 協議+域名+端口
• 獲取源的方法：window.origin
• 若是兩個url的 協議名、域名、端口號 徹底一致，則稱他們同源。

舉例：
https://qq.com 和 https://www.baidu.com 不一樣源
https://baidu.com 和 https://www.baidu.com 也不一樣源
（二）同源策略定義

1. 瀏覽器規定：
   若是JS運行在源A中，那麼就只能得到源A中的數據，不能得到源B中的數據，即不容許「跨域」
2. 舉例：

   假設 https://oliver.com/index.html 引用了https://cdn.com/jQuery.js
   那麼就說jQuery.js是運行在源 https://oliver.com 裏
   因此jQuery.js只能得到 https://oliver.com 中的數據，而不能獲取源 https://cdn.com 中的數據

（三）關鍵問題

• 瀏覽器沒法區分請求的發送者

（四）同源策略的目的

• 爲了保護用戶隱私，防止用戶我的數據被釣魚網站偷走。

跨域的實現

解決方案一：CORS

1. 問題根源：
   瀏覽器默認不一樣源之間不能相互訪問數據
   但假設有兩個不一樣源的網站都屬於我，我就是想要他們相互訪問，那麼我能夠用CORS方法。
2. 使用方法：提早聲明。
   在源A中增長響應頭Access-Control-Allow-Origin: http://xxx.xxx
   這樣就能夠容許源 http://xxx.xxx 訪問源A的數據了
3. 詳細用法：去MDN瞅瞅

解決方案二：JSONP

1. 問題根源：
   IE不支持CORS啊！！！
2. 定義：
   利用script標籤沒有跨域限制來使用js包裹數據，達成和第三方數據通訊的一種跨域解決方案。

3. 步驟
   假設oliver.com想要訪問db.com裏的數據

   1. db.com中的數據寫到/data.js裏
   2. oliver.com用<script>引用db.com/data.js
   3. /data.js執行，執行什麼呢？
   4. oliver.com提早定義好window.fn函數
   5. /data.js執行window.fn({data:[...]})
   6. 而後源oliver.com就經過window.fn獲取到了數據
   • window.fn就是一個回調啊！
4. JSONP的優缺點

• 優勢：

  1. 解決IE的兼容；
  2. 能夠跨域；

• 缺點：

  1. 讀取不到狀態碼等詳細響應信息
  2. 只能發get請求，不支持post

總結：

1. 跨域實現了跨頁面的數據通訊，是前端很是重要的一門技術點。
2. 個人github中寫好了JSONP和CORS的demo 點擊查看