JSONP_跨域

題目1: 什么是同源策略驻右?

瀏覽器出于安全方面的考慮突雪,只允許與本域下的接口交互起惕。不同源的客戶端腳本在沒有明確授權(quán)的情況下,不能讀寫對方的資源咏删。

http://a.jrg.com:8080/

1.http:  指協(xié)議惹想,其他協(xié)議有https\file\ftp\ssh\mailto\tel等
2.a.jrg.com:  指域名
3.8080:  指端口,默認端口號為80督函,若為80一般就不寫出來了

只要協(xié)議嘀粱、域名、端口有任何一個不同辰狡,都會被當作是不同的域锋叨。

同源舉例:
http://jrg.com/a/b.jshttp://jrg.com/index.php

不同源舉例:
http://me.com/main.jshttps://me.com/a.php (協(xié)議不同)

http://a.me.com/main.jshttp://b.me.com/a.php (域名不同,域名必須完全相同才可以)

http://me.com/main.jshttp://me.com:8080/a.php (端口不同宛篇,第一個是80)

需要注意: 對于當前頁面來說頁面存放的 JS 文件的域不重要娃磺,重要的是加載該 JS 頁面所在什么域

題目2: 什么是跨域?跨域有幾種實現(xiàn)形式叫倍?

跨域就是突破同源策略的限制偷卧,去不同的域下訪問數(shù)據(jù)

  1. JSONP (實際就是以加載js的方式,執(zhí)行拿到不同域名中的數(shù)據(jù))
  2. CORS (在后端的返回頭部設(shè)置Access-Control-Allow-Origin添加允許訪問的域名)
  3. 降域 (2者都設(shè)置document.domain=" "訪問的前后都要降域并且2者都要有同一個基礎(chǔ)域名吆倦,比如a.jrg.comb.jrg.com听诸,降域后都為jrg.com
  4. postMessage 在兩個窗口/frames間發(fā)送數(shù)據(jù)信息,但不是瀏覽器跟服務(wù)器之間交互逼庞,而是在兩個客戶端之間通信

題目3: JSONP 的原理是什么蛇更?

由于同源策略,XMLHttpRequest()對象無法跨域赛糟,但<script>派任、<img><link>等標簽是可以跨域的璧南。所以可以利用<script>標簽來向服務(wù)器發(fā)送請求掌逛。

  1. 通過script標簽引入一個js文件,在src中傳遞一個callback=function參數(shù)給服務(wù)端
  2. 服務(wù)端返回數(shù)據(jù)時會將這個callback參數(shù)作為函數(shù)名包裹住JSON數(shù)據(jù)function([json數(shù)據(jù)])
  3. 當這個js文件載入成功后就會執(zhí)行我們指定的function回調(diào)函數(shù)司倚,并且會把我們需要的JSON數(shù)據(jù)作為參數(shù)傳入
前端

服務(wù)后端

題目4: CORS是什么豆混?參考

跨域資源共享(Cross-origin resource sharing),是一種ajax跨域請求資源的方式(支持現(xiàn)代瀏覽器动知,IE支持10以上)恬口。

實現(xiàn)方式:當使用 XMLHttpRequest發(fā)送請求時粱坤,瀏覽器發(fā)現(xiàn)該請求不符合同源策略,會給該請求加一個請求頭:Origin,后臺進行一系列處理兔甘,如果確定接受請求則在返回結(jié)果中加入一個響應(yīng)頭:Access-Control-Allow-Origin; 瀏覽器判斷該相應(yīng)頭中是否包含 Origin的值,如果有則瀏覽器會處理響應(yīng)享郊,我們就可以拿到響應(yīng)數(shù)據(jù)搪哪,如果不包含瀏覽器直接駁回,這時我們無法拿到響應(yīng)數(shù)據(jù)摊崭。
所以 CORS 的表象是讓你覺得它與同源的 ajax 請求沒啥區(qū)別讼油,代碼完全一樣。

比如發(fā)送了一個origin頭部:
Origin: http://a.jrg.com:8080
如果服務(wù)器(后端)認為這個請求可以接受呢簸,就在Access-Control-Allow-Origin頭部中發(fā)回相同的源信息:
Access-Control-Allow-Origin: http://a.jrg.com:8080 (與請求相同)

題目5: 根據(jù)視頻里的講解演示三種以上跨域的解決方式

gitHub代碼鏈接

cors

在服務(wù)端發(fā)送數(shù)據(jù)之前添加一個響應(yīng)頭矮台,允許該域名跨域獲取數(shù)據(jù)


cors

cors

降域

當a.jrg.com 想要操作 b.jrg.com的文件,可以通過兩者都添加document.domain = "jrg.com"降域為jrg.com才能互相操作

缺點:只能用于相同的父級域名

降域

PostMessage

postMessage的原理是會向另一個地方發(fā)送信息根时,另一個地方通常是iframe或者是由當前頁面彈出的窗口嘿架。

當父級頁面里包含了不同域里的iframe,可以通過這種方式來進行通信
當父級頁面可以通過postMessgae將內(nèi)容發(fā)送給子iframe啸箫∷时耄可以通過監(jiān)聽message事件,來獲取信息忘苛。

window.frames[0].postMessage(value,'*')
window.addEventListener('message',function(e) {
    console.log(e.data);
});

iframe可以通過postMessgae將內(nèi)容發(fā)送給父頁面蝉娜。可以通過監(jiān)聽message事件扎唾,來獲取信息召川。

window.parent.postMessage(value,'*')
window.addEventListener('message',function(e) {
    console.log(e.data);
});
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市胸遇,隨后出現(xiàn)的幾起案子荧呐,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 210,914評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件倍阐,死亡現(xiàn)場離奇詭異概疆,居然都是意外死亡,警方通過查閱死者的電腦和手機峰搪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評論 2 383
  • 文/潘曉璐 我一進店門岔冀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人概耻,你說我怎么就攤上這事使套。” “怎么了鞠柄?”我有些...
    開封第一講書人閱讀 156,531評論 0 345
  • 文/不壞的土叔 我叫張陵侦高,是天一觀的道長。 經(jīng)常有香客問我厌杜,道長奉呛,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,309評論 1 282
  • 正文 為了忘掉前任期奔,我火速辦了婚禮侧馅,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘呐萌。我一直安慰自己馁痴,他們只是感情好,可當我...
    茶點故事閱讀 65,381評論 5 384
  • 文/花漫 我一把揭開白布肺孤。 她就那樣靜靜地躺著罗晕,像睡著了一般。 火紅的嫁衣襯著肌膚如雪赠堵。 梳的紋絲不亂的頭發(fā)上小渊,一...
    開封第一講書人閱讀 49,730評論 1 289
  • 那天,我揣著相機與錄音茫叭,去河邊找鬼酬屉。 笑死,一個胖子當著我的面吹牛揍愁,可吹牛的內(nèi)容都是我干的呐萨。 我是一名探鬼主播,決...
    沈念sama閱讀 38,882評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼莽囤,長吁一口氣:“原來是場噩夢啊……” “哼谬擦!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起朽缎,我...
    開封第一講書人閱讀 37,643評論 0 266
  • 序言:老撾萬榮一對情侶失蹤惨远,失蹤者是張志新(化名)和其女友劉穎谜悟,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體北秽,經(jīng)...
    沈念sama閱讀 44,095評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡葡幸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,448評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了羡儿。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片礼患。...
    茶點故事閱讀 38,566評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡是钥,死狀恐怖掠归,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情悄泥,我是刑警寧澤虏冻,帶...
    沈念sama閱讀 34,253評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站弹囚,受9級特大地震影響厨相,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜鸥鹉,卻給世界環(huán)境...
    茶點故事閱讀 39,829評論 3 312
  • 文/蒙蒙 一蛮穿、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧毁渗,春花似錦践磅、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至肺樟,卻和暖如春檐春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背么伯。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1 264
  • 我被黑心中介騙來泰國打工疟暖, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人田柔。 一個月前我還...
    沈念sama閱讀 46,248評論 2 360
  • 正文 我出身青樓俐巴,卻偏偏與公主長得像,于是被迫代替她去往敵國和親凯楔。 傳聞我的和親對象是個殘疾皇子窜骄,可洞房花燭夜當晚...
    茶點故事閱讀 43,440評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 什么是同源策略 同源政策(same-origin policy)是指同域名(或ip),同端口,同協(xié)議視為同一個域摆屯,...
    小囧兔閱讀 497評論 0 1
  • 題目1: 什么是同源策略 瀏覽器出于安全考慮邻遏,只允許與本域下的接口交互糠亩。不同源的客戶端腳本在沒有明確授權(quán)的情況下,...
    saintkl閱讀 234評論 0 0
  • 什么是同源策略 同源策略/SOP(Same origin policy)是一種約定准验,由Netscape公司1995...
    YQY_苑閱讀 305評論 0 0
  • 1: 什么是同源策略 最初赎线,它的含義是指,A網(wǎng)頁設(shè)置的 Cookie糊饱,B網(wǎng)頁不能打開垂寥,除非這兩個網(wǎng)頁"同源",所謂...
    好奇而已閱讀 296評論 0 0
  • 題目1: 什么是同源策略 瀏覽器出于安全方面的考慮,只允許與本域下的接口交互另锋。不同源的客戶端腳本在沒有明確授權(quán)的情...
    進擊的前端_風笑影閱讀 306評論 0 0