什么是同源策略
瀏覽器出于安全方面的考慮戚嗅，只允許與本域下的接口交互雨涛。不同源的客戶端腳本在沒有明確授權(quán)的情況下，不能讀寫對(duì)方的資源懦胞。
本域指的是：
- 同協(xié)議
- 同域名
- 同端口
需要注意的是: 對(duì)于當(dāng)前頁面來說頁面存放的 JS 文件的域不重要替久，重要的是加載該 JS 頁面所在什么域
什么是跨域？跨域有幾種實(shí)現(xiàn)形式
什么是跨域：不同域的接口進(jìn)行交互
跨域的實(shí)現(xiàn)方式：跨域有幾種實(shí)現(xiàn)形式
- JSONP
- CORS
- 降域
- postMessage
JSONP 的原理是什么
HTML 中 script 標(biāo)簽可以加載其他域下的js躏尉，比如我們經(jīng)常引入一個(gè)其他域下線上cdn的jQuery蚯根。因此我們可以使用script標(biāo)簽來進(jìn)行跨域
例如：
從天氣接口獲取數(shù)據(jù)
<script src="http://api.jirengu.com/weather.php"></script>
這時(shí)候會(huì)向天氣接口發(fā)送請(qǐng)求獲取數(shù)據(jù)，獲取數(shù)據(jù)后做為 js 來執(zhí)行胀糜。但是發(fā)送回來的數(shù)據(jù)是JSON格式颅拦，后端返回?cái)?shù)據(jù)： {"city": "hangzhou", "weather": "晴天"}script標(biāo)簽執(zhí)行會(huì)報(bào)錯(cuò)。
因此請(qǐng)求數(shù)據(jù)時(shí)這樣請(qǐng)求
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>
這個(gè)請(qǐng)求到達(dá)后端后教藻，后端會(huì)去解析callback這個(gè)參數(shù)獲取到字符串showData距帅， 現(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是通過 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)鸦致。
CORS是什么
CORS 全稱是跨域資源共享（Cross-Origin Resource Sharing）潮剪，是一種 ajax 跨域請(qǐng)求資源的方式，支持現(xiàn)代瀏覽器分唾，IE支持10以上抗碰。 實(shí)現(xiàn)方式很簡(jiǎ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ù)摔寨。
具體代碼示例稍后再寫
