幾種跨域的解決方法

瀏覽器出于安全方面的考慮卑吭,只允許與本域下的接口交互芽淡。不同源的客戶端腳本在沒有明確授權的情況下,不能讀寫對方的資源陨簇。
但在實際運用中我們往往需要獲取不同源的數(shù)據(jù)吐绵,以下為解決跨域問題獲取不同源數(shù)據(jù)的幾種方法

1. JSONP

一個網(wǎng)頁可以從任何網(wǎng)頁獲得js文件迹淌,基于動態(tài)<script>標簽,通過src屬性設置跨域url,可以獲得其他域的資源
JSONP是被包含在函數(shù)中的JSON己单,瀏覽器將JSONP作為JS解析(調用一個函數(shù))唉窃,跨域請求到的JSON作為回調函數(shù)的參數(shù),形如:

callback({"name":"Jim"});

JSONP有兩部分組成纹笼,回調函數(shù)和數(shù)據(jù)纹份。回調函數(shù)是當響應到來時應該在頁面中調用的函數(shù)廷痘,回調函數(shù)的名字一般在請求中指定蔓涧;數(shù)據(jù)就是傳入回調函數(shù)中的JSON數(shù)據(jù)

<script>
var load=document.querySelector('#load');
var shownews=document.querySelector('showNews);
load.addEventListener('click',function(){
  var script=document.createElement("script"); 
  script.src='http://a.song.com:8080/getSong?callback=getSong';//設置跨域url,回調函數(shù)名getSong
  document.head.appendChild(script);
  document.head.removeChild(script);//獲取資源后動態(tài)<script>標簽作用結束笋额,可刪除此節(jié)
});
function getSong(json){//定義回調函數(shù)
  console.log(json);
}
</script>

2. CORS

跨域資源共享元暴,允許瀏覽器向跨源服務器,發(fā)出XMLHttpRequest請求兄猩,從而克服了AJAX只能同源使用的限制茉盏。
額外添加一個origin頭部,其中包含了請求頁面的源消息(協(xié)議枢冤、域名和端口)鸠姨,根據(jù)這個頭部信息服務器來決定是否給予響應,例如:

  • request的當前域


    image.png
  • request發(fā)起請求
xhr.open('get', 'http://a.song.com:8080/getSong', true);
  • 服務器設置允許請求的域
res.header("Access-Control-Allow-Origin", "http://localhost:8080");
image.png
  • 頭部信息匹配淹真,跨域請求成功


    image.png

3.postMessage

當前url:http://a.jrg.com:8080

<div class="main">
    <input type="text" placeholder="http://a.jrg.com:8080/a.html">
</div>
<iframe src="http://localhost:8080/b.html" frameborder="0" ></iframe>

向其他域發(fā)送數(shù)據(jù)

<script>
//URL: http://a.jrg.com:8080/a.html
$('.main input').addEventListener('input', function(){
    console.log(this.value);
    window.frames[0].postMessage(this.value,'*');//發(fā)送數(shù)據(jù)讶迁,*表示任何域,也可精確到某個特定域名
})

當前域http://localhost:8080核蘸,接收來自http://a.jrg.com:8080域發(fā)送的消息

<script>
window.addEventListener('message',function(e) {//監(jiān)聽其他域發(fā)送過來的消息
        $('.main input').value = e.data
    console.log(e.data);
});
</script>

4.降域

當前頁面的url:

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

向其他域請求資源:

URL: http://b.jrg.com:8080/b.html

降域實現(xiàn)

<script>
//URL: http://a.jrg.com:8080/a.html
document.domain = "jrg.com"
</script>
<script>
//URL: http://b.jrg.com:8080/a.html
document.domain = "jrg.com"
</script>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末巍糯,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子值纱,更是在濱河造成了極大的恐慌鳞贷,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件虐唠,死亡現(xiàn)場離奇詭異搀愧,居然都是意外死亡,警方通過查閱死者的電腦和手機疆偿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進店門咱筛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人杆故,你說我怎么就攤上這事迅箩。” “怎么了处铛?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵饲趋,是天一觀的道長拐揭。 經(jīng)常有香客問我,道長奕塑,這世上最難降的妖魔是什么堂污? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮龄砰,結果婚禮上盟猖,老公的妹妹穿的比我還像新娘。我一直安慰自己换棚,他們只是感情好式镐,可當我...
    茶點故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著固蚤,像睡著了一般娘汞。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上颇蜡,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天价说,我揣著相機與錄音辆亏,去河邊找鬼风秤。 笑死,一個胖子當著我的面吹牛扮叨,可吹牛的內容都是我干的缤弦。 我是一名探鬼主播,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼彻磁,長吁一口氣:“原來是場噩夢啊……” “哼碍沐!你這毒婦竟也來了?” 一聲冷哼從身側響起衷蜓,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤累提,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后磁浇,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體斋陪,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年置吓,在試婚紗的時候發(fā)現(xiàn)自己被綠了无虚。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡衍锚,死狀恐怖友题,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情戴质,我是刑警寧澤度宦,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布踢匣,位于F島的核電站,受9級特大地震影響戈抄,放射性物質發(fā)生泄漏符糊。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一呛凶、第九天 我趴在偏房一處隱蔽的房頂上張望男娄。 院中可真熱鬧,春花似錦漾稀、人聲如沸模闲。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽尸折。三九已至,卻和暖如春殷蛇,著一層夾襖步出監(jiān)牢的瞬間实夹,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工粒梦, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留亮航,地道東北人。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓匀们,卻偏偏與公主長得像缴淋,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子泄朴,可洞房花燭夜當晚...
    茶點故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內容