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

wua_wua2012 發布于2019-08-19 18:00 / 565人閱讀

摘要：黨我們使用去獲得異源的數據時，就會造成跨域請求。總結是很常見的處理跨域的方法，但是這種方式只能是類型的請求并且需要服務器配合，這樣才能完成跨域，但是它的優點就是實現比較簡單并且對低版本瀏覽器支持都很好。

何為跨域

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

JSONP

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

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

//本地代碼

//服務器上的代碼

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

總結：JSONP是很常見的處理跨域的方法，但是這種方式只能是GET類型的請求并且需要服務器配合，這樣才能完成跨域，但是它的優點就是實現比較簡單并且對低版本瀏覽器支持都很好。

原文出處 https://github.com/Jiavan/jia... 覺得對你有幫助就給個star吧

云服務器 GPU云服務器 jsonp跨域請求 json跨域請求實例 js跨域請求 Js跨域請求視頻

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79071.html

前端相關大雜燴

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

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

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

CoorChice 2019-08-23 14:41 評論0 收藏0
有價值的前端技術點

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

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

摘要：可以說同源策略在安全中扮演著及其重要的角色。我把這個領域的東西寫成了一個系列，以后還會繼續完善下去安全一同源策略與跨域安全二攻擊安全三攻擊之所以要將同源策略與跨域寫在一起，是因為存在瀏覽器的同源策略，才會存在跨域問題何為同源策略同源策略是瀏覽器實現的一種安全策略，它限制了不同源之間的文檔和腳本交互的權限。只有同一個源的腳本才會具有操作dom、讀寫cookie、session 、a...

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

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

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