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

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

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

何為跨域

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

JSONP

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

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

//本地代碼

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79071.html

相關(guān)文章

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

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

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

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

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

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

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

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

cgspine 2019-08-22 14:56 評論0 收藏0
再也不學(xué)AJAX了?。ㄈ?em>跨域獲取資源 ② - JSONP & CORS

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

enda 2019-08-21 17:55 評論0 收藏0