同源策略瀏覽器設計的一個功能限制CORS突破同源策略的一個方法JSONPIE時代的補救辦法
同源策略
（一）同源的定義：
- 源：源 = 協議+域名+端口
- 獲取源的方法：window.origin
- 如果兩個url的 協議名、域名、端口號 完全一致，則稱他們同源。
舉例：https://qq.com 和 https://www.baidu.com 不同源https://baidu.com 和 https://www.baidu.com 也不同源（二）同源策略定義
- 瀏覽器規定：
如果JS運行在源A中，那么就只能獲得源A中的數據，不能獲得源B中的數據，即不允許“跨域” - 舉例：假設 https://oliver.com/index.html 引用了https://cdn.com/jQuery.js那么就說jQuery.js是運行在源 https://oliver.com 里所以jQuery.js只能獲得 https://oliver.com 中的數據，而不能獲取源 https://cdn.com 中的數據
（三）關鍵問題
- 瀏覽器無法區分請求的發送者
（四）同源策略的目的
- 為了保護用戶隱私，防止用戶個人數據被釣魚網站偷走。
跨域的實現
解決方案一：CORS
- 問題根源：
瀏覽器默認不同源之間不能相互訪問數據
但假設有兩個不同源的網站都屬于我，我就是想要他們相互訪問，那么我可以用CORS方法。 - 使用方法：提前聲明。
在源A中增加響應頭Access-Control-Allow-Origin: http://xxx.xxx
這樣就可以允許源 http://xxx.xxx 訪問源A的數據了 - 詳細用法：去MDN瞅瞅
解決方案二：JSONP
- 問題根源：
IE不支持CORS啊！！！ - 定義：
利用script標簽沒有跨域限制來使用js包裹數據，達成和第三方數據通信的一種跨域解決方案。 - 步驟假設oliver.com想要訪問db.com里的數據 db.com中的數據寫到/data.js里 oliver.com用<script>引用db.com/data.js /data.js執行，執行什么呢？ oliver.com提前定義好window.fn函數 /data.js執行window.fn({data:[...]}) 然后源oliver.com就通過window.fn獲取到了數據 window.fn就是一個回調啊！
- JSONP的優缺點
- 優點： 解決IE的兼容； 可以跨域；
- 缺點： 讀取不到狀態碼等詳細響應信息 只能發get請求，不支持post
總結：
- 跨域實現了跨頁面的數據通信，是前端非常重要的一門技術點。
- 我的github中寫好了JSONP和CORS的demo 點擊查看
原文 https://segmentfault.com/a/1190000021686919
