摘要：說明關(guān)于跨域問題的解決方案多達七八種，你不要說哪有這么多，我不跟你較真哈，你也別跟我較真哈自行百度或這里不會跟你說那么多種只說使用最多的一種你要非說用的不是最多的我不信哦你信好了哈哈你開心就好關(guān)于跨域瀏覽器的同源策略要了解什么是跨域你需要了

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

瀏覽器的同源策略

要了解什么是 跨域 你需要了解什么是瀏覽器的 同源策略

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

其實說白了就一句話 相同域名、相同協(xié)議、相同端口 瀏覽器才允許訪問, 這是出于安全方面的考慮, 其它一律不允許訪問！

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

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

A域名下訪問B域名資源

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

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

可以發(fā)現(xiàn)控制臺并沒有輸出任何返回數(shù)據(jù), 因為它也沒有數(shù)據(jù)可輸出, 而是給出了下面這樣一個提示信息：

而在網(wǎng)絡(luò)請求列表可以看到請求資源URL沒有返回任何數(shù)據(jù)

既然通過 jQuery 的 AJAX 方法返回數(shù)據(jù)形式是 JSON 格式, 請求資源URL, 沒有獲取到任何數(shù)據(jù), 通過瀏覽器直接訪問資源URL可以正常獲取到數(shù)據(jù)！

從上面可以看到通過瀏覽器直接訪問資源URL也就是API接口是可以獲取到數(shù)據(jù)的, 而通過返回數(shù)據(jù)形式為 JSON 的方式是拒絕訪問的, 那么要想通過在 tem.mac.dev 這個域名訪問 warnerwu.centos.dev 域名下的API接口URL資源就需要使用 JSONP, 只需要將 jQuery 中 AJAX 方法中的 dataType 值修改為即可

dataType : "JSONP"

注意

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

瀏覽器開發(fā)者工具控制臺提示

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

瀏覽器開發(fā)者工具網(wǎng)絡(luò)請求列表詳情

那既然在 控制臺 看不到任何 警告 信息也看不到數(shù)據(jù)輸出, 不防看一下 網(wǎng)絡(luò) 請求列表是怎么樣的！

從 網(wǎng)絡(luò) 請求列表中的最后一條可以看出這個訪問資源API接口的完整URL是：

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

這里你就會發(fā)現(xiàn)這個請求資源地址與 AJAX 方法中的 url 參數(shù)值截然不同! 它多了兩個參數(shù)：

callback=jQuery21408945840059161158_1519958486174&_=1519958486175

是這樣的, 在使用 jQuery 的 AJAX 方法時, 如果指定返回數(shù)據(jù)方式是 JSONP 時, 也就是 AJAX 參數(shù)對象字面量 dataType : "JSONP" 時, 如下所示：

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

它就會在發(fā)起請求資源時在 AJAX 方法參數(shù)對象字面量 url 的具體鏈接上自動添加參數(shù) callback 和 _, 而且這兩個參數(shù)的值基本上永遠不會重復(fù)

AJAX參數(shù)對象字面量 url JSONP參數(shù)值

callback: 值為隨機以 jQuery 開頭后跟隨機數(shù)字字符串的回調(diào)函數(shù)名稱

_: 值為隨機數(shù)字字符串, 它保證每次發(fā)起 AJAX 請求都是新的, 而不會使用瀏覽器已請求過的URL 緩存機制 已存在資源

在上圖中可以看到 網(wǎng)絡(luò) 請求資源列表中API接口訪問URL的具體參數(shù)列表, 而 響應(yīng) 具體是這樣的：

可以看到 響應(yīng) 返回的是JSON格式的數(shù)據(jù), 這樣是不對的！不防再看一下 控制臺：

可以看到控制臺依然是 空空如也！什么都沒有, 到目錄為止其實 前端或客戶端 所做的工作已經(jīng)完成！接下來就是 服務(wù)器端 API接口要做些修改操作嘍！

這里使用的服務(wù)器端語言是 PHP, 其它語言也是一樣處理哦！

其實服務(wù)器端所以要的調(diào)整很簡單, 只需要獲取請求參數(shù) callback, 然后返回以 callback 參數(shù)值為函數(shù)名稱的JSONP格式的編碼數(shù)據(jù)字符串即可

API接口調(diào)整之前

這種處理方式是針對不存在跨域API接口請求獲取數(shù)據(jù)時通常的做法, 如果是JSONP跨域請求API接口獲取數(shù)據(jù)時就不通用嘍！

API接口調(diào)整之后

可以看到這里在服務(wù)器端處理為通用請求獲取數(shù)據(jù)返回形式, 不管是否是跨域請求API接口均可使用！

再次刷新頁面跨域請求API接口數(shù)據(jù)

你會發(fā)現(xiàn)請求API接口數(shù)據(jù)成功, 并且請求時的 callback 參數(shù)值和返回的JSONP格式數(shù)據(jù)方法名稱一致, 獲取到的JSONP格式數(shù)據(jù)怎么處理的呢？
當(dāng)請求成功時就會執(zhí)行以 jQuery 下 AJAX 方法生成的 callback 參數(shù)值對就的函數(shù), 恰好這個正是從服務(wù)器端返回的JSONP格式數(shù)據(jù), 函數(shù)執(zhí)行結(jié)束后返回主題數(shù)據(jù)也就是與服務(wù)器端編碼返回之前的數(shù)據(jù)類型一致的數(shù)據(jù)形式

以上是跨域請求API接口通過控制臺輸出的數(shù)組數(shù)據(jù)

以上是通過瀏覽器直接訪問API接口獲取的數(shù)組數(shù)據(jù)

說白了使用 JQuery 的 AJAX 方法實現(xiàn)跨域請求資源是非常簡單的！

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

其實非常簡單的問題在這里說了這么多, 大家見諒！?
以上就是 JSONP跨域訪問API接口深入理解 的詳細過程, 謝謝您的支持！
希望本文對你的工作和學(xué)習(xí)有所幫助
如果覺得還不錯并且也長知識了, 怎么感謝我呢？ 媽呀! 點贊啊!
Good Luck! from warnerwu at 2018.03.02 PM, email address is warnerwu@126.com