跨域問題

1浇衬、跨域是什么金吗?

1)廣義的跨域:指一個域下的文檔或腳本試圖去請求另一個域下的資源十兢。

??? a)資源跳轉: 鏈接、重定向摇庙、表單提交

??? b)資源嵌入:link,script,img等帶src屬性的標簽等

??? c)腳本請求: js發(fā)起的ajax請求旱物、dom和js對象的跨域操作等

2)我們通常所說的跨域是狹義的,是由瀏覽器同源策略限制的卫袒。

??? a宵呛、同源策略/SOP(Same origin policy):同源是指“協(xié)議+域名+端口"三者相同,即便兩個不同的域名指向同一個ip地址夕凝,也非同源宝穗。(這是一種約定封孙,由Netscape公司1995年引入瀏覽器,它是瀏覽器最核心也最基本的安全功能讽营,如果缺少了同源策略,瀏覽器很容易受到XSS泡徙、CSFR等攻擊橱鹏。所謂)

??? b、同源策略限制以下幾種行為:

??????? 1.) Cookie堪藐、LocalStorage 和 IndexDB 無法讀取

??????? 2.) DOM 和 Js對象無法獲得

??????? 3.) AJAX 請求不能發(fā)送

??? c莉兰、常見跨域場景

2、跨域解決方案

1)通過JSONP跨域

JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式礁竞,而JSONP(JSON with Padding)則是JSON 的一種“使用模式”糖荒,通過這種模式可以實現(xiàn)數(shù)據(jù)的跨域獲取。?

JSONP跨域的原理:在同源策略下模捂,在某個服務器下的頁面是無法獲取到該服務器以外的數(shù)據(jù)的捶朵,但img、iframe狂男、script等標簽是個例外综看,這些標簽可以通過src屬性請求到其他服務器上的數(shù)據(jù)。利用script標簽的開放策略岖食,我們可以實現(xiàn)跨域請求數(shù)據(jù)红碑,當然,也需要服務端的配合泡垃。當我們正常地請求一個JSON數(shù)據(jù)的時候析珊,服務端返回的是一串JSON類型的數(shù)據(jù),而我們使用JSONP模式來請求數(shù)據(jù)的時候蔑穴,服務端返回的是一段可執(zhí)行的JavaScript代碼忠寻。

在jQuery中如何通過JSONP來跨域獲取數(shù)據(jù)

??? a)在ajax函數(shù)中設置dataType為 'jsonp' :?

??? b、利用getJSON來實現(xiàn)存和,只要在地址中加上callback=?參數(shù)即可:?

2)document.domain + iframe跨域

3) location.hash + iframe

4) window.name + iframe跨域

5) postMessage跨域

6) 跨域資源共享(CORS)

7) nginx代理跨域

8) node.js中間件代理跨域

9) WebSocket協(xié)議跨域



參考:前端常見跨域解決方案(全) - inroam - 博客園

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末锡溯,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子哑姚,更是在濱河造成了極大的恐慌祭饭,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,290評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件叙量,死亡現(xiàn)場離奇詭異倡蝙,居然都是意外死亡,警方通過查閱死者的電腦和手機绞佩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2 385
  • 文/潘曉璐 我一進店門寺鸥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來猪钮,“玉大人,你說我怎么就攤上這事胆建】镜停” “怎么了?”我有些...
    開封第一講書人閱讀 156,872評論 0 347
  • 文/不壞的土叔 我叫張陵笆载,是天一觀的道長扑馁。 經常有香客問我,道長凉驻,這世上最難降的妖魔是什么腻要? 我笑而不...
    開封第一講書人閱讀 56,415評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮涝登,結果婚禮上雄家,老公的妹妹穿的比我還像新娘。我一直安慰自己胀滚,他們只是感情好趟济,可當我...
    茶點故事閱讀 65,453評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著咽笼,像睡著了一般咙好。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上褐荷,一...
    開封第一講書人閱讀 49,784評論 1 290
  • 那天勾效,我揣著相機與錄音,去河邊找鬼叛甫。 笑死层宫,一個胖子當著我的面吹牛,可吹牛的內容都是我干的其监。 我是一名探鬼主播萌腿,決...
    沈念sama閱讀 38,927評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼抖苦!你這毒婦竟也來了毁菱?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,691評論 0 266
  • 序言:老撾萬榮一對情侶失蹤锌历,失蹤者是張志新(化名)和其女友劉穎贮庞,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體究西,經...
    沈念sama閱讀 44,137評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡窗慎,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,472評論 2 326
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片遮斥。...
    茶點故事閱讀 38,622評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡峦失,死狀恐怖,靈堂內的尸體忽然破棺而出术吗,到底是詐尸還是另有隱情尉辑,我是刑警寧澤,帶...
    沈念sama閱讀 34,289評論 4 329
  • 正文 年R本政府宣布较屿,位于F島的核電站隧魄,受9級特大地震影響,放射性物質發(fā)生泄漏吝镣。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,887評論 3 312
  • 文/蒙蒙 一昆庇、第九天 我趴在偏房一處隱蔽的房頂上張望末贾。 院中可真熱鬧,春花似錦整吆、人聲如沸拱撵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽拴测。三九已至,卻和暖如春府蛇,著一層夾襖步出監(jiān)牢的瞬間集索,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工汇跨, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留务荆,地道東北人。 一個月前我還...
    沈念sama閱讀 46,316評論 2 360
  • 正文 我出身青樓穷遂,卻偏偏與公主長得像函匕,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子蚪黑,可洞房花燭夜當晚...
    茶點故事閱讀 43,490評論 2 348

推薦閱讀更多精彩內容

  • 1. 什么是跨域盅惜? 跨域一詞從字面意思看,就是跨域名嘛忌穿,但實際上跨域的范圍絕對不止那么狹隘抒寂。具體概念如下:只要協(xié)議...
    他在發(fā)呆閱讀 822評論 0 0
  • 1. 什么是跨域? 跨域一詞從字面意思看,就是跨域名嘛掠剑,但實際上跨域的范圍絕對不止那么狹隘蓬推。具體概念如下:只要協(xié)議...
    稍縱即逝_e5e9閱讀 196評論 0 0
  • 瀏覽器在請求不同域的資源時沸伏,會因為同源策略的影響請求不成功糕珊,這就是通常被提到的“跨域問題”。作為前端開發(fā)毅糟,解決跨域...
    SCQ000閱讀 2,542評論 1 52
  • 大家好姆另,我是IT修真院鄭州分院第一期的學員胡嘉杰喇肋,一枚正直純潔善良的WEB前端程序員。 今天給大家分享一下迹辐,修真院...
    ithinker5閱讀 492評論 0 1
  • 跨域蝶防,是一個前端開發(fā)者必須掌握的概念,這篇文章就從幾個基本問題出發(fā)明吩,來理解這個概念间学。 首先,什么是跨域印荔?為何會有跨...
    阿追老師Jason閱讀 563評論 0 2