JSONP（JSON with Padding）是一種常用的跨域數(shù)據(jù)請(qǐng)求策略，它的基本原理是利用 <script> 標(biāo)簽的 src 屬性沒有同源策略限制的特性來(lái)達(dá)到跨域的目的。
我們來(lái)詳細(xì)解析 JSONP 的工作原理：
- 構(gòu)造請(qǐng)求：在前端，我們首先構(gòu)造一個(gè)請(qǐng)求 URL，將需要的數(shù)據(jù)以查詢參數(shù)的形式附加到 URL 上。這個(gè) URL 通常還會(huì)包含一個(gè)特殊的查詢參數(shù)，例如 callback，用來(lái)指定一個(gè)回調(diào)函數(shù)的名稱。
- 創(chuàng)建 script 標(biāo)簽：然后，我們動(dòng)態(tài)創(chuàng)建一個(gè) <script> 標(biāo)簽，并將其 src 屬性設(shè)置為上一步構(gòu)造的 URL。這個(gè) <script> 標(biāo)簽一旦被插入到 html 文檔中，瀏覽器就會(huì)開始加載 src 指向的資源。
- 服務(wù)器響應(yīng)：服務(wù)器接收到請(qǐng)求后，從查詢參數(shù)中提取數(shù)據(jù)并進(jìn)行處理。處理完畢后，服務(wù)器將處理結(jié)果包裹在一個(gè)函數(shù)調(diào)用中返回。這個(gè)函數(shù)的名稱就是前端在請(qǐng)求中指定的回調(diào)函數(shù)的名稱。
- 執(zhí)行回調(diào)函數(shù)：當(dāng)瀏覽器接收到服務(wù)器的響應(yīng)后，由于響應(yīng)內(nèi)容是一個(gè)函數(shù)調(diào)用，所以瀏覽器會(huì)嘗試執(zhí)行這個(gè)函數(shù)。前端需要預(yù)先定義這個(gè)回調(diào)函數(shù)，以處理從服務(wù)器接收到的數(shù)據(jù)。
JSONP 的缺點(diǎn)是只能進(jìn)行 GET 請(qǐng)求，不能進(jìn)行 POST 或其他類型的 HTTP 請(qǐng)求。此外，由于是通過(guò)插入 <script> 標(biāo)簽的方式獲取數(shù)據(jù)，如果服務(wù)器響應(yīng)的數(shù)據(jù)中含有惡意腳本，那么這些腳本將會(huì)被執(zhí)行，從而帶來(lái)安全風(fēng)險(xiǎn)。
由于以上缺點(diǎn)，現(xiàn)在更推薦使用 CORS（跨源資源共享）來(lái)進(jìn)行跨域請(qǐng)求，CORS 不僅支持所有類型的 HTTP 請(qǐng)求，而且更安全。
