jsonp实现跨域请求 只有代码demo 原理不详解

客服端

• html 结构

<button class="btn">按钮</button>
<div class="jsonp">
</div>

• js结构

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
	//需要通过点击实现 jquery包自己引入
	$('.btn').click(()=>{
		// http://127.0.0.1:3000服务端地址 show是回调用的函数
		$('.jsonp').append('<script src="http://127.0.0.1:3000?callback=show&username=tom"></script>')
	})
	function show(hao){
		console.log(hao); // 这里输出服务端返回的需要的值
		$('.jsonp>script').eq(0).remove(); // 将动态创建的script标签删掉
	}
</script>

服务端（node服务器）

// 这里用到了koa2安装一下
const koa = require('koa');
const app = new koa();
const router = require('koa-router')();
router.get('/',async (ctx,next)=>{
    // ctx.body = data;
    // 模拟简单数据库中某一条数据，实际只复杂一点
    const mysql = {
        username : 'tom',
        code: 100
    };
    let code = '';
    if(ctx.request.query.username == mysql.username){
        code = mysql.code;
    }
    ctx.body = `${ctx.request.query.callback}(${code})`;
})
app.use(router.routes(),router.allowedMethods());

app.listen(3001,(err)=>{
    console.log('连接服务器成功！');
})