JSONP 跨域原理

同源策略&跨域

什麼是 JSONP？

JSONP（JSON with Padding）是資料格式JSON的一種「使用模式」，可讓網頁從別的網域獲取資料。 —— 維基百科

JSONP 核心原理

• script 標籤不受同源策略影響。
• 動態插入到 DOM 中的 script 腳本能夠當即獲得執行。

實現步驟

1. 客戶端建立一個 JavaScript 函數，用來接收服務端返回的數據。

function onResponse(data) {
    // do something
}
複製代碼

2. 客戶端動態插入 script 標籤執行請求。

var script = document.createElement('script')
script.src = 'protocal://domain:port/path?callback=onResponse'
document.head.appendChild(script)
document.head.removeChild(script)
複製代碼

3. 服務端將數據和 js 回調函數名拼接爲函數調用的字符串並返回給客戶端。

app.get('/path', function(request, response) {
    var data = getData()
    var callback = request.query.callback
    var result = `${callback}(${JSON.stringify(data)});`
    response.send(result)
})
複製代碼

4. 客戶端接收到 script 標籤響應並自動執行回調函數。

JSONP 的缺點

• 只能使用 GET 請求。
• 動態插入的 script 腳本可能被注入惡意代碼。