跨域一直使用CORS,JSONP大概知道,但没有实践过。这次来实践一下。
前端代码
window.addEventListener('DOMContentLoaded', function() {
ajax({
url: '/jsonp',
params: {
p: '前端参数'
},
callback: function (data) {
alert(data)
}
})
})
function ajax ({url, params, callback}) {
const script = document.createElement("script");
script.type = "text/javascript";
window.callback = callback
let s = '&'
for (let [key, val] of Object.entries(params)) {
if (typeof val === 'object') {
s += (key + '=' + JSON.stringify(val) + '&')
} else {
s += (key + '=' + val + '&')
}
}
s.slice(0, s.length - 1)
url = url + '?funName=window.callback' + s;
script.src = url + '?funName=window.callback';
script.text = '!' + callback.toString() + '()';
document.body.appendChild(script);
}
后台代码(Express)
router.get('/jsonp', function(req, res, next) {
let p = req.query.p
let funName = req.query.funName
let s = funName + '("' + p + '")'
res.writeHead(200, {
'Content-Length': Buffer.byteLength(s),
'Content-Type': 'application/javascript'
});
res.write(s)
res.end()
});
总结
利用script脚本可以跨域请求的特性,将客户端用于处理结果的函数的函数名传递给服务端,服务端返回一个脚本文件,脚本文件的内容是函数名执行+请求结果作为函数参数。这样客户端在加载完这个脚本后会执行该脚本,调用处理结果的函数。
网友评论