1伍掀、同源策略：其是瀏覽器中很重要的一種安全策略，所謂同源：協(xié)議暇藏、域名蜜笤、端口號(hào)相同，瀏覽器端才能成功獲取到服務(wù)器端資源盐碱，不同源的客戶端腳本(javaScript/ActionScript)在沒明確授權(quán)的情況下瘩例，不能讀寫對(duì)方的資源；【同源策略的核心：并非當(dāng)發(fā)送請(qǐng)求的時(shí)候甸各，瀏覽器查看URL與服務(wù)器端是否遵守同源來(lái)判斷垛贤，而是當(dāng)你發(fā)送請(qǐng)求到服務(wù)器端，請(qǐng)求到資源后返回客戶端的時(shí)候趣倾，瀏覽器開始判斷聘惦，若是不符合同源策略，其就會(huì)報(bào)錯(cuò)】
(1).Ajax受瀏覽器同源策略的限制，所以網(wǎng)絡(luò)02中測(cè)試Ajax善绎，用http://localhost/index.html;訪問(wèn) http://localhost/getNews.php;
(2).http://www.example.com/page.html;? http://example.com/page.html;?這兩個(gè)并不一定是同一地址黔漂，服務(wù)器端并不一定配置了別名,所以訪問(wèn)服務(wù)器資源的過(guò)程中，不一定能互相訪問(wèn)禀酱；www.baidu.com的別名是baidu.com炬守，兩個(gè)都可以成功訪問(wèn)服務(wù)器端資源；
2剂跟、跨域訪問(wèn)解決方案：[除了Flash减途，其他都很常用]
(1).Flash：其是一種插件，目前幾乎沒人再使用了曹洽；
(2).服務(wù)器代理中轉(zhuǎn)：設(shè)置服務(wù)器代理成功跨域鳍置，瀏覽器訪問(wèn)服務(wù)器有同源策略限制，但服務(wù)器之間可以直接傳輸數(shù)據(jù)送淆，沒有同源策略税产，http://localhost/index.html 想訪問(wèn)http://www.baidu.com，可做服務(wù)器代理http://localhost/,?客戶端直接訪問(wèn)即可偷崩；
(3).jsonp跨域：jsonp最初是jQuery提出的跨域方案，慢慢才在原生中使用阐斜，巧妙利用了script標(biāo)簽的src屬性,img的src屬性也是如此呀狼，但iframe框架即使有src屬性也遵循同源策略萨蚕，跨域有其他方式试幽；
(4).document.domain：其針對(duì)基礎(chǔ)域名相同的情況综苔，document.domain = baidu.com;//設(shè)置基礎(chǔ)域名相同即可;?其下的子域名可以進(jìn)行跨域訪問(wèn)扛伍，zhidao.baidu.com; wenku.baidu.com等可互相訪問(wèn)岛琼；應(yīng)用場(chǎng)景：例如兩個(gè)網(wǎng)址都是未登錄狀態(tài)床三，登錄百度文庫(kù)后酥泛，再進(jìn)入百度的其他網(wǎng)頁(yè)惕澎，該網(wǎng)頁(yè)也是登錄狀態(tài)莉测，底層還涉及cookie的知識(shí)；
(5).CORS(跨域資源共享)：access-control-allow-origin:允許特定域名訪問(wèn)唧喉，后臺(tái)響應(yīng)頭中設(shè)置捣卤，access-control-allow-origin: *;//表示允許所有域名訪問(wèn)(白名單);//側(cè)面證明同源策略的核心是當(dāng)客戶端請(qǐng)求到數(shù)據(jù)返回客戶端的時(shí)候，瀏覽器會(huì)進(jìn)行判斷八孝，若是不符合同源董朝，其會(huì)報(bào)錯(cuò)；? ? ? ? ? ? ? ? ? 【當(dāng)使用XMLHttpRequest發(fā)送請(qǐng)求時(shí)干跛，瀏覽器如果發(fā)現(xiàn)違反了同源策略就會(huì)自動(dòng)加上一個(gè)請(qǐng)求頭:origin,后端在接受到請(qǐng)求后確定響應(yīng)后會(huì)在Response Headers中加入一個(gè)屬性:Access-Control-Allow-Origin,值就是發(fā)起請(qǐng)求的源地址子姜，瀏覽器得到響應(yīng)會(huì)進(jìn)行判斷Access-Control-Allow-Origin的值是否和當(dāng)前的地址相同，只有匹配成功后才進(jìn)行響應(yīng)處理÷ト耄現(xiàn)代瀏覽器中和移動(dòng)端都支持cors哥捕，IE8以上】
(6).iframe框架：子窗口拿父級(jí)元素：location.hash;?父窗口拿子級(jí)元素：window.name; H5中的postMessage;以及websocket配合iframe跨域操作
3牧抽、jsonp跨域：瀏覽器的同源策略中<script>元素是個(gè)例外，其通過(guò)src屬性可以動(dòng)態(tài)引入json數(shù)據(jù)卻不受同源策略的影響遥赚，其是JSON的一種"使用模式"[ json with padding:?json外加了包裹層 ]
(1).可理解為src屬性不受同源策略限制扬舒，之前使用img圖片的時(shí)候src直接引入網(wǎng)絡(luò)上圖片的地址便可使用，以及script引入各種庫(kù)文件凫佛，按道理說(shuō)都是不同源的讲坎，但依舊可獲取資源，底層原理便是src
(2).jsonp的應(yīng)用場(chǎng)景多為制作搜索框御蒲，jsonp不僅可以做GET請(qǐng)求衣赶，也可以做POST請(qǐng)求，同ajax類似厚满，只不過(guò)它們更聚焦到GET請(qǐng)求
(3).使用jsonp的過(guò)程中：動(dòng)態(tài)創(chuàng)建script標(biāo)簽府瞄，引入資源，用完銷毀最佳~? (聚焦點(diǎn)：引入數(shù)據(jù));
(4).封裝jsonp;(demo:百度搜索框~)
4碘箍、iframe框架：在當(dāng)前頁(yè)面嵌入另一個(gè)網(wǎng)頁(yè)遵馆，嵌入的網(wǎng)頁(yè)有獨(dú)立的document文檔結(jié)構(gòu)；
(1).應(yīng)用場(chǎng)景：廣告頁(yè)面(不用更改本頁(yè)面結(jié)構(gòu))丰榴，在線編輯器货邓，導(dǎo)航欄tab切換(首尾部相同，只改變中間頁(yè)面四濒，引入不同的iframe框架即可换况，較古老的做法)，以及一些登錄注冊(cè)頁(yè)面(大公司都使用最新的單頁(yè)面應(yīng)用[用戶體驗(yàn)感好]盗蟆，小公司還在使用);[目前QQ郵箱登錄注冊(cè)框也不再使用iframe]
(2).iframe框架的缺點(diǎn)：window.onload事件在整個(gè)文檔頁(yè)面全部加載完成后執(zhí)行戈二，過(guò)多嵌入iframe框架會(huì)阻塞頁(yè)面加載 ->解決方案：動(dòng)態(tài)加載iframe框架
(3).<iframe src=""></iframe>;//iframe框架即使有src屬性，其也是嚴(yán)格遵循同源策略喳资，同源下才能互相訪問(wèn)變量觉吭，方法等；(測(cè)試過(guò)程中必須在wampserver/www文件夾下仆邓，如果直接打開鲜滩，其是file協(xié)議，本地協(xié)議又沒有域名节值，端口號(hào)徙硅，所以沒法談同源策略，同源策略是發(fā)送網(wǎng)絡(luò)請(qǐng)求過(guò)程中)
- - - >>>?同源策略下父子窗口元素互相訪問(wèn)：使用window.parent;/ ifr.contentWidow
- - - >>>(非同源)跨域父子窗口元素訪問(wèn)：子窗口訪問(wèn)父窗口元素：location.hash;? 父窗口訪問(wèn)子窗口元素：window.name;
[1].父窗口
[2].子窗口
H5中的新方法：postMessage; websocket;//websocket:(其也是一種協(xié)議類似http,解決http不能讓服務(wù)器主動(dòng)發(fā)出數(shù)據(jù)的問(wèn)題搞疗，其也是TCP闷游、ip協(xié)議建立連接，但建立連接后不會(huì)斷開，每當(dāng)服務(wù)器數(shù)據(jù)有變化的時(shí)候脐往，其就發(fā)送個(gè)服務(wù)器端)
