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