1：什么是同源策略
- 瀏覽器出于安全及用戶隱私方面的考慮，只允許腳本與本域下的接口交互冷冗。不同源的客戶端腳本在沒有明確授權(quán)的情況下蝴猪，不能讀寫對(duì)方的資源隅忿。（不允許域名不同的網(wǎng)站之間互相調(diào)用ajax，別的比如js征堪、css還是可以訪問）
- 同源策略分以下兩種：
- DOM同源策略：禁止對(duì)不同源頁面DOM進(jìn)行操作瘩缆。這里主要場(chǎng)景是iframe跨域的情況，不同域名的iframe是限制互相訪問的佃蚜。
- XmlHttpRequest同源策略：禁止使用XHR對(duì)象向不同源的服務(wù)器地址發(fā)起HTTP請(qǐng)求庸娱。
- 本域指的是？
- 同協(xié)議：如都是http或者h(yuǎn)ttps
- 同域名：如都是http://jirengu.com/a 和http://jirengu.com/b
- 同端口：如都是80端口
http://www.zhihu.com vs http://zhihu.com 不同源(域名必須完全相同才可以)
需要注意的是：對(duì)于當(dāng)前頁面來說谐算，存放js的頁面的域不重要熟尉，重要的是加載（執(zhí)行）該js的頁面是什么域
同源策略是瀏覽器自身的安全機(jī)制，出現(xiàn)跨域時(shí)洲脂，請(qǐng)求是發(fā)到服務(wù)器的斤儿，服務(wù)器也給了響應(yīng)，但是瀏覽器覺得數(shù)據(jù)不安全所以進(jìn)行了攔截
2：什么是跨域恐锦？跨域有幾種實(shí)現(xiàn)形式
- 瀏覽器禁止訪問的場(chǎng)景：
- js里發(fā)送ajax請(qǐng)求往果，如果請(qǐng)求的url和當(dāng)前頁面的url非同域，則瀏覽器會(huì)拒絕提供數(shù)據(jù)并報(bào)錯(cuò)
- 當(dāng)前頁面下引入iframe,如果iframe里的頁面和當(dāng)前頁面的url非同域一铅，則瀏覽器會(huì)禁止當(dāng)前頁面的js獲取或者操作iframe下頁面的dom
- 對(duì)于場(chǎng)景1陕贮，可以通過jsonp或者cors繞過瀏覽器的限制
- 對(duì)于場(chǎng)景2，如果兩個(gè)頁面擁有相同的一級(jí)域名（如 a.hunger.com 和b.hunger.com）可通過降域的方式馅闽，如果是不同域名飘蚯，可使用postmessage)
3：JSONP 的原理是什么
HTML 中 script 標(biāo)簽可以加載其他域下的js，比如我們經(jīng)常引入一個(gè)其他域下線上cdn的jQuery福也。那如何利用這個(gè)特性實(shí)現(xiàn)從其他域下獲取數(shù)據(jù)呢局骤？
可以先這樣試試：
<script src="http://api.jirengu.com/weather.php"></script>
這時(shí)候會(huì)向天氣接口發(fā)送請(qǐng)求獲取數(shù)據(jù)，獲取數(shù)據(jù)后做為 js 來執(zhí)行暴凑。 但這里有個(gè)問題峦甩， 數(shù)據(jù)是 JSON 格式的數(shù)據(jù)，直接作為 JS 運(yùn)行的話我如何去得到這個(gè)數(shù)據(jù)來操作呢现喳？
這樣試試：
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>
這個(gè)請(qǐng)求到達(dá)后端后凯傲，后端會(huì)去解析callback這個(gè)參數(shù)獲取到字符串showData，在發(fā)送數(shù)據(jù)做如下處理：
之前后端返回?cái)?shù)據(jù)： {"city": "hangzhou", "weather": "晴天"} 現(xiàn)在后端返回?cái)?shù)據(jù)： showData({"city": "hangzhou", "weather": "晴天"})嗦篱， 前端script標(biāo)簽在加載數(shù)據(jù)后會(huì)把 「showData({“city”: “hangzhou”, “weather”: “晴天”})」做為 js 來執(zhí)行冰单，這實(shí)際上就是調(diào)用showData這個(gè)函數(shù)，同時(shí)參數(shù)是 {“city”: “hangzhou”, “weather”: “晴天”}灸促。 用戶只需要在加載提前在頁面定義好showData這個(gè)全局函數(shù)诫欠，在函數(shù)內(nèi)部處理參數(shù)即可涵卵。
<script>
function showData(ret){
console.log(ret);
}
</script>
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>
這就是 JSONP(JSON with padding)
總結(jié)：JSONP是通過 script 標(biāo)簽加載數(shù)據(jù)的方式去獲取數(shù)據(jù)當(dāng)做 JS 代碼來執(zhí)行，提前在頁面上聲明一個(gè)函數(shù)荒叼，函數(shù)名通過接口傳參的方式傳給后臺(tái)轿偎，后臺(tái)解析到函數(shù)名后在原始數(shù)據(jù)上「包裹」這個(gè)函數(shù)名，發(fā)送給前端被廓。換句話說坏晦，JSONP 需要對(duì)應(yīng)接口的后端的配合才能實(shí)現(xiàn)。
4：CORS是什么
- CORS 全稱是跨域資源共享（Cross-Origin Resource Sharing）嫁乘，是一種 ajax 跨域請(qǐng)求資源的方式昆婿，支持現(xiàn)代瀏覽器，IE支持10以上亦渗。 實(shí)現(xiàn)方式很簡單挖诸，當(dāng)你使用 XMLHttpRequest 發(fā)送請(qǐng)求時(shí)，瀏覽器發(fā)現(xiàn)該請(qǐng)求不符合同源策略法精，會(huì)給該請(qǐng)求加一個(gè)請(qǐng)求頭：Origin多律，后臺(tái)進(jìn)行一系列處理，如果確定接受請(qǐng)求則在返回結(jié)果中加入一個(gè)響應(yīng)頭：Access-Control-Allow-Origin; 瀏覽器判斷該相應(yīng)頭中是否包含 Origin 的值搂蜓，如果有則瀏覽器會(huì)處理響應(yīng)狼荞，我們就可以拿到響應(yīng)數(shù)據(jù)，如果不包含瀏覽器直接駁回帮碰，這時(shí)我們無法拿到響應(yīng)數(shù)據(jù)相味。所以 CORS 的表象是讓你覺得它與同源的 ajax 請(qǐng)求沒啥區(qū)別，代碼完全一樣殉挽。
CORS的本質(zhì)就是在后臺(tái)加了一條說明丰涉，說明哪些域可以訪問該接口。瀏覽器在收到響應(yīng)以后會(huì)對(duì)照響應(yīng)頭里面的
Access-Control-Allow-Origin的值斯碌，如果當(dāng)前頁面的域符合該值要求一死，那就可以處理數(shù)據(jù)。如果不符傻唾，那么就拒絕響應(yīng)數(shù)據(jù)投慈。
