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