淺析JS中的跨域請(qǐng)求-圖解加實(shí)例(JSONP篇)

wua_wua2012 發(fā)布于2019-08-19 18:00 / 561人閱讀

摘要：黨我們使用去獲得異源的數(shù)據(jù)時(shí)，就會(huì)造成跨域請(qǐng)求。總結(jié)是很常見的處理跨域的方法，但是這種方式只能是類型的請(qǐng)求并且需要服務(wù)器配合，這樣才能完成跨域，但是它的優(yōu)點(diǎn)就是實(shí)現(xiàn)比較簡(jiǎn)單并且對(duì)低版本瀏覽器支持都很好。

何為跨域

簡(jiǎn)單來說就是js與異源頁(yè)面進(jìn)行通信，正常情況不允許js進(jìn)行跨域通信的原因是其同源策略。

JSONP

黨我們使用XHR去獲得異源的數(shù)據(jù)時(shí)，就會(huì)造成跨域請(qǐng)求。JSONP(JSON Padding)即填充式JSON可以來解決這樣的問題。

實(shí)現(xiàn)原理：雖然我們不能直接請(qǐng)求異源上的資源，但是在js中如img，script標(biāo)簽卻是可以得到其他服務(wù)器上的資源的，那么我們就可以通過這樣的方式將一段js代碼間接地從外部引入。通過script標(biāo)簽向目標(biāo)源發(fā)起一個(gè)GET請(qǐng)求，服務(wù)器根據(jù)請(qǐng)求的參數(shù)返回包含js的代碼，請(qǐng)看下圖：

//本地代碼

//服務(wù)器上的代碼

先在本地定義了一個(gè)函數(shù)，這是用來處理來自服務(wù)器上數(shù)據(jù)的函數(shù)，下面用一個(gè)script標(biāo)簽，并且向服務(wù)器發(fā)起了一個(gè)GET請(qǐng)求，并且指定了處理數(shù)據(jù)的回調(diào)函數(shù)，即上方的getData，服務(wù)器收到請(qǐng)求后返回了getData("{"name": "jiavan", "age": 20}");，即使一段js代碼，將數(shù)據(jù)傳入到回調(diào)函數(shù)中處理，這樣便完成了跨域。

總結(jié)：JSONP是很常見的處理跨域的方法，但是這種方式只能是GET類型的請(qǐng)求并且需要服務(wù)器配合，這樣才能完成跨域，但是它的優(yōu)點(diǎn)就是實(shí)現(xiàn)比較簡(jiǎn)單并且對(duì)低版本瀏覽器支持都很好。原文出處 https://github.com/Jiavan/jia... 覺得對(duì)你有幫助就給個(gè)star吧

云服務(wù)器 GPU云服務(wù)器 jsonp跨域請(qǐng)求 json跨域請(qǐng)求實(shí)例 js跨域請(qǐng)求 Js跨域請(qǐng)求視頻

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/79071.html

相關(guān)文章

前端相關(guān)大雜燴

摘要：希望幫助更多的前端愛好者學(xué)習(xí)。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開發(fā)工程師當(dāng)你問起有關(guān)與時(shí)，老司機(jī)們首先就會(huì)告訴你其實(shí)是個(gè)沒有網(wǎng)絡(luò)請(qǐng)求功能的庫(kù)。前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡(jiǎn)單原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 評(píng)論0 收藏0
徹底弄懂跨域問題

摘要：瀏覽器同源策略我們?yōu)楹我芯靠缬騿栴}因?yàn)闉g覽器的同源策略規(guī)定某域下的客戶端在沒明確授權(quán)的情況下，不能讀寫另一個(gè)域的資源。跨域，老生常談的問題簡(jiǎn)述作為一只前端菜鳥，跨域方面只懂得JSONP和CORS，并未曾深入了解。但隨著春招越來越近，就算是菜鳥也要猛振翅膀。近幾日仔細(xì)研究了跨域問題，寫下這篇文章，希望對(duì)開發(fā)者們有所幫助。在讀本文前，希望您對(duì)以下知識(shí)略有了解。瀏覽器同源策略 n...

CoorChice 2019-08-23 14:41 評(píng)論0 收藏0
有價(jià)值的前端技術(shù)點(diǎn)

摘要：借著產(chǎn)品層面的功能和視覺升級(jí)，我們用對(duì)它進(jìn)行了一次技術(shù)重構(gòu)。前端優(yōu)化是一個(gè)讓人技術(shù)提升的，希望你也能從這里學(xué)到一些東西。年最流行的前端鏈接我們每周會(huì)給多名前端開發(fā)者發(fā)送新聞郵件。面試 -- 網(wǎng)絡(luò) HTTP 現(xiàn)在面試門檻越來越高，很多開發(fā)者對(duì)于網(wǎng)絡(luò)知識(shí)這塊了解的不是很多，遇到這些面試題會(huì)手足無措。本篇文章知識(shí)主要集中在 HTTP 這塊。文中知識(shí)來自《圖解 HTTP》與維基百科，若有錯(cuò)...

microelec 2019-08-26 11:32 評(píng)論0 收藏0
web安全一，同源策略與跨域

摘要：可以說同源策略在安全中扮演著及其重要的角色。我把這個(gè)領(lǐng)域的東西寫成了一個(gè)系列，以后還會(huì)繼續(xù)完善下去安全一同源策略與跨域安全二攻擊安全三攻擊之所以要將同源策略與跨域?qū)懺谝黄穑且驗(yàn)榇嬖跒g覽器的同源策略，才會(huì)存在跨域問題何為同源策略同源策略是瀏覽器實(shí)現(xiàn)的一種安全策略，它限制了不同源之間的文檔和腳本交互的權(quán)限。只有同一個(gè)源的腳本才會(huì)具有操作dom、讀寫cookie、session 、a...

cgspine 2019-08-22 14:56 評(píng)論0 收藏0
再也不學(xué)AJAX了！（三）跨域獲取資源 ② - JSONP & CORS

摘要：瀏覽器的同源策略固然保障了互聯(lián)網(wǎng)世界的數(shù)據(jù)隱私與數(shù)據(jù)安全，但是如果當(dāng)我們需要使用跨域請(qǐng)求資源時(shí)，同源策略又會(huì)成為開發(fā)者的阻礙。我們之前提到過，如果想要繞過瀏覽器同源策略，實(shí)現(xiàn)使用技術(shù)跨域獲取資源，需要服務(wù)端和客戶端的協(xié)同合作。瀏覽器的同源策略固然保障了互聯(lián)網(wǎng)世界的數(shù)據(jù)隱私與數(shù)據(jù)安全，但是如果當(dāng)我們需要使用AJAX跨域請(qǐng)求資源時(shí)，同源策略又會(huì)成為開發(fā)者的阻礙。在本文中，我們會(huì)簡(jiǎn)單介紹需...

enda 2019-08-21 17:55 評(píng)論0 收藏0