JSONP指南

JSONP是一種繞過同源策略從第三方服務器加載數據的方法

默認情況下,您無法加載JSON格式來自非當前域和端口的文件,並在您的應用程序中使用它。

您可以通過以下方式提供該應用程序localhost:8080,但該API由在上運行的另一個Node.js應用程序提供localhost:2001

或者,您可能想在瀏覽器中訪問一些公開可用的,用作JSON的API。

這是使用API的常見需求,但是由於安全原因,在瀏覽器中我們受到限制。原產地政策默認情況下,必須拒絕此行為,以防止可能出現的問題。

JSONP出生於CORS存在。如今,CORS是解決問題的一種(唯一的?)明智方法,但是了解JSONP可能對您的情況更好,這很有用。此外,自JSONP誕生以來,就發現了一些安全問題,因此您需要了解所有使用JSONP的安全隱患

JSONP僅支持GETHTTP方法,因此它的功能遠不及CORS。

它是如何工作的

服務器必須支持JSONP,例如Express允許您使用Response.jsonp()方法,就像Response.json()但處理JSONP回調:

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

在客戶端,您加載指定回調函數的端點:

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

回調函數必須是將接收JSON數據的全局函數:

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

jQuery通過在其JSON中抽象JSONP來方便地簡化此方法ajax()方法:

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

免費下載我的JavaScript初學者手冊


更多js教程: