JSONP 指南

JSONP 是從第三方服務器加載數據的一種方式，可以繞過同源策略。

默認情況下，你無法從不是當前域名和端口的地方加載 JSON 文件並在應用程序中使用它。

你可能將應用程序從 localhost:8080 服務，但API是由另一個運行在 localhost:2001 上的Node.js應用程序提供的。

或者你可能希望在瀏覽器中訪問一些以JSON格式提供的公共API。

使用API是一個常見需求，在瀏覽器中，由於安全原因，由於同源策略，默認情況下必須禁止這種行為，以防止可能的問題。

JSONP 在 CORS 存在之前誕生。如今，CORS 是一種更（也是唯一一種？）明智的方法來解決這個問題，但你也需要了解 JSONP，因為它可能在你的情況下更好。此外，自 JSONP 誕生以來，一些安全問題已被發現，所以你需要了解使用 JSONP 的所有安全問題。

JSONP 僅支持 GET HTTP 方法，因此它比CORS要不那麼強大。

它是如何工作的

服務器必須支持 JSONP，例如 Express 中可以使用 Response.jsonp() 方法，它類似於 Response.json() ，但處理 JSONP 回調：

1	res.jsonp({ username: 'Flavio' })

在客戶端，你可以加載指定了回調函數的端點：

1	<script src="http://localhost:2001/api.json?callback=theCallbackFunction"></script>

回調函數必須是全局的，它將接收 JSON 數據：

1
2
3

const theCallbackFunction = (data) => {
 console.log(data)
}

jQuery 通過在其 ajax() 方法中封裝 JSONP，簡化了此方法：

$.ajax({
 url: 'http://localhost:2001/api.json',
 dataType: 'jsonp',
 success: (data) => {
 console.log(data)
 }
})

tags: [“JSONP”, “web development”, “security”]