JSONP跨域訪問API接口深刻理解

時間 2019-12-05

標籤 jsonp 訪問 api 接口深刻理解欄目 JSON 简体版

原文原文鏈接

說明

關於跨域問題的解決方案多達7、八種，你不要說哪有這麼多，我不跟你較真哈，你也別跟我較真哈, ?！自行 百度 或 Google, 這裏不會跟你說那麼多種, 只說使用最多的一種 JSONP, 你要非說 JSONP 用的不是最多的, 我不信哦, 你信好了, 哈哈, 你開心就好?

關於跨域

瀏覽器的同源策略

要了解什麼是 跨域 你須要瞭解什麼是瀏覽器的同源策略

瀏覽器容許訪問的資源必要條件

其實說白了就一句話 相同域名、相同協議、相同端口 瀏覽器才容許訪問, 這是出於安全方面的考慮, 其它一概不容許訪問！

瀏覽器容許訪問的同源資源俗解

好比說： a.com/article/mid/512 要訪問 a.com/data/detail/512 是容許訪問的, a.com/article/mid/512 要訪問 b.com/data/detail/512 是拒絕的！

A域名下訪問B域名資源

那麼非要訪問不一樣域名下的資源, 怎麼辦呢？那麼問題來了！跨域

不使用跨域訪問

這種方式是在沒有跨域訪問其它域名資源URL常規作法！而訪問其它域名資源URL是不可行的！

前端代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP TEST</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<script>
    $.ajax({
        type : 'GET',
        dataType : 'JSON',
        url : "http://warnerwu.centos.dev/?c=adCreativeLib&a=api&type=list",
        success : function (data){
            console.log(data);
        }
    });
</script>
</body>
</html>

瀏覽器開發者工具控制檯提示

能夠發現控制檯並無輸出任何返回數據, 由於它也沒有數據可輸出, 而是給出了下面這樣一個提示信息：

瀏覽器開發者工具網絡請求列表詳情

而在網絡請求列表能夠看到請求資源URL沒有返回任何數據

後端返回數據形式

既然經過 jQuery 的 AJAX 方法返回數據形式是 JSON 格式, 請求資源URL, 沒有獲取到任何數據, 經過瀏覽器直接訪問資源URL能夠正常獲取到數據！

使用JSONP跨域訪問資源

前端或客戶端處理

從上面能夠看到經過瀏覽器直接訪問資源URL也就是API接口是能夠獲取到數據的, 而經過返回數據形式爲 JSON 的方式是拒絕訪問的, 那麼要想經過在 tem.mac.dev 這個域名訪問 warnerwu.centos.dev 域名下的API接口URL資源就須要使用 JSONP, 只須要將 jQuery 中 AJAX 方法中的 dataType 值修改成便可

dataType : 'JSONP'

注意javascript

這裏也只是限於把上面所說的「直接經過瀏覽器訪問資源API接口URL獲取到的數據」經過JSONP的形式給獲取到了而已也只是僅僅如此, 下面再次刷新頁面經過 JSONP 訪問資源API接口URL來驗證這一點！

瀏覽器開發者工具控制檯提示

在控制檯下已經看不到 已攔截跨域請求 的警告信息啦！而是 空空如也 哦 ?

瀏覽器開發者工具網絡請求列表詳情

那既然在 控制檯 看不到任何 警告 信息也看不到數據輸出, 不防看一下 網絡 請求列表是怎麼樣的！

從 網絡 請求列表中的最後一條能夠看出這個訪問資源API接口的完整URL是：

http://warnerwu.centos.dev/?c=adCreativeLib&a=api&type=list&callback=jQuery21408945840059161158_1519958486174&_=1519958486175

這裏你就會發現這個請求資源地址與 AJAX 方法中的 url 參數值大相徑庭! 它多了兩個參數：

callback=jQuery21408945840059161158_1519958486174&_=1519958486175

是這樣的, 在使用 jQuery 的 AJAX 方法時, 若是指定返回數據方式是 JSONP 時, 也就是 AJAX 參數對象字面量 dataType : 'JSONP' 時, 以下所示：

$.ajax({
    type : 'GET',
    dataType : 'JSONP',
    url : "http://warnerwu.centos.dev/?c=adCreativeLib&a=api&type=list",
    success : function (data){
        console.log(data);
    }
});

它就會在發起請求資源時在 AJAX 方法參數對象字面量 url 的具體連接上自動添加參數 callback 和 _, 並且這兩個參數的值基本上永遠不會重複

AJAX參數對象字面量 `url` JSONP參數值

callback: 值爲隨機以 jQuery 開頭後跟隨機數字字符串的回調函數名稱
_: 值爲隨機數字字符串, 它保證每次發起 AJAX 請求都是新的, 而不會使用瀏覽器已請求過的URL 緩存機制 已存在資源

在上圖中能夠看到 網絡 請求資源列表中API接口訪問URL的具體參數列表, 而 響應 具體是這樣的：

能夠看到 響應 返回的是JSON格式的數據, 這樣是不對的！不防再看一下 控制檯：

能夠看到控制檯依然是 空空如也！什麼都沒有, 到目錄爲止其實 前端或客戶端 所作的工做已經完成！接下來就是 服務器端 API接口要作些修改操做嘍！

服務器端處理

這裏使用的服務器端語言是 PHP, 其它語言也是同樣處理哦！html

其實服務器端因此要的調整很簡單, 只須要獲取請求參數 callback, 而後返回以 callback 參數值爲函數名稱的JSONP格式的編碼數據字符串便可

API接口調整以前

這種處理方式是針對不存在跨域API接口請求獲取數據時一般的作法, 若是是JSONP跨域請求API接口獲取數據時就不通用嘍！

API接口調整以後

能夠看到這裏在服務器端處理爲通用請求獲取數據返回形式, 不論是否是跨域請求API接口都可使用！

再次刷新頁面跨域請求API接口數據

你會發現請求API接口數據成功, 而且請求時的 callback 參數值和返回的JSONP格式數據方法名稱一致, 獲取到的JSONP格式數據怎麼處理的呢？
當請求成功時就會執行以 jQuery 下 AJAX 方法生成的 callback 參數值對就的函數, 剛好這個正是從服務器端返回的JSONP格式數據, 函數執行結束後返回主題數據也就是與服務器端編碼返回以前的數據類型一致的數據形式前端

以上是跨域請求API接口經過控制檯輸出的數組數據

以上是經過瀏覽器直接訪問API接口獲取的數組數據

總結

說白了使用 JQuery 的 AJAX 方法實現跨域請求資源是很是簡單的！

前端代碼

$.ajax({
    type : 'GET',
    dataType : 'JSONP',
    url : "http://warnerwu.centos.dev/?c=adCreativeLib&a=api&type=list",
    success : function (data){
        console.log(data);
    }
});

服務器端代碼

其實很是簡單的問題在這裏說了這麼多, 你們見諒！?
以上就是 JSONP跨域訪問API接口深刻理解 的詳細過程, 謝謝您的支持！java

但願本文對你的工做和學習有所幫助jquery

若是以爲還不錯而且也長知識了, 怎麼感謝我呢？媽呀! 點贊啊!ajax

Good Luck! from warnerwu at 2018.03.02 PM, email address is warnerwu@126.com後端