前置知识点： 同源策略 & 跨域
什么是 JSONP？
JSONP（JSON with Padding）是资料格式JSON的一种“使用模式”，可以让网页从别的网域获取资料。 —— 维基百科
JSONP 核心原理
-
script标签不受同源策略影响。 - 动态插入到
DOM中的script脚本可以立即得到执行。
实现步骤
- 客户端创建一个
JavaScript函数，用来接收服务端返回的数据。
function onResponse(data) {
// do something
}
- 客户端动态插入
script标签执行请求。
var script = document.createElement('script')
script.src = 'protocal://domain:port/path?callback=onResponse'
document.head.appendChild(script)
document.head.removeChild(script)
- 服务端将数据和 js 回调函数名拼接为函数调用的字符串并返回给客户端。
app.get('/path', function(request, response) {
var data = getData()
var callback = request.query.callback
var result = `${callback}(${JSON.stringify(data)});`
response.send(result)
})
- 客户端接收到
script标签响应并自动执行回调函数。
JSONP 的缺点
- 只能使用
GET请求。 - 动态插入的
script脚本可能被注入恶意代码。
