jsonp原理
利用script标签没有跨域限制的漏洞，网页可以从其他来源动态生成的json．
jsonp优缺点
优：兼容性好
缺：仅支持 get 方法
jsonp实现流程
- 声明一个回调函数(
callback)，其函数名当做参数，传给需要跨域访问的服务端，服务端将目标数据当做形参返回给客户端 - 客户端创建
script标签，并在script标签地址上带上?callback=xxx - 服务端将传过来的函数名与需要返回的数据进行字符串拼接，如
show('helloworld') - 客户端声明回调函数的方法，并调用
前端页面：
function createJsonP(url, data, callback) {
return new Promise((resolve, reject) => {
// 生成script标签
let eScript = document.createElement('script');
const eBody = document.body;
let params = [];
window[callback] = function(data) {
resolve(data);
// 完成后移除script标签
eBody.removeChild(eScript);
};
eScript.id = new Date().getTime();
for(let i in data) {
params.push(`${i}=${data[i]}`);
}
params = params.join('&');
eScript.src = `${url}?${params}&callback=${callback}`;
// 插入body
eBody.appendChild(eScript);
});
}
createJsonP('/test', {
username: 'admin',
pass: '123',
}, 'show').then((data) => {
console.log(data); // 用户名是：admin, 密码是：123
});
server端（以nodejs为例）：
const express = require('express');
const app = express();
app.get('/test', (req, res) => {
const {username, pass, callback } = req.query;
res.end(`${callback}('用户名是：${username}, 密码是：${pass}')`);
});
app.listen(1828);
