转载请注明出处,点击此处 查看更多精彩内容。
前置知识点: 同源策略 & 跨域
什么是 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
脚本可能被注入恶意代码。