阅读 13

实现jsonp跨域,前后端配合

1.实现jsonp跨域

1.创建回调方法

 function getData(data){
        console.log(data,'koko')
    }
复制代码

2.动态创建script标签,插入到body最后

let script=document.createElement('script')

script.src='http://localhost:3000?callback=getData'

document.body.appendChild(script)
复制代码

3.后台,用koa搭建一个服务器

const Koa=require('koa')

let app=new Koa()

app.use((ctx)=>{

    let callback=ctx.query.callback
    let data={
        name:"胡积极",
        age:18,
        sex:'男'
    };
    let dataStr=JSON.stringify(data);
let res=callback+"("+dataStr+")";
 ctx.body=res
})

app.listen(3000,()=>{
    console.log('http://localhost:3000')
})
复制代码

实现原理:

Step1: 创建 callback 方法

Step2: 插入 script 标签

Step3: 后台接受到请求,解析前端传过去的 callback 方法,返回该方法的调用,并且数据作为参数传入该方法

Step4: 前端执行服务端返回的方法调用

关注下面的标签,发现更多相似文章
评论