跨域 JSONP 请求只能用GET方法, 不可能是POST

232 阅读1分钟
前端代码
<script type='text/javascript'>
后端返回直接执行的方法,相当于执行这个方法,由于后端把返回的数据放在方法的参数里,所以这里能拿到res。
cb = function(res) {
    console.log(res)
}
</script>
<!-- 传入数据是msg,传入一个回调方式cb -->
<script src='http://xxxxx/api/jsonp?msg=helloWorld&cb=cb' type='text/javascript'></script>

服务端类似这样返回
static async jsonp(ctx) {
    // 获取前端传入的参数
    const query = ctx.request.query
    // query.cb获取到前端传入的cb字段。
    // 由于前端是用script标签发起的请求,
    // 所以前端请求到的资源其实是这样的一段js代码  cb(服务端返回的数据),所以前端就直接执行了
    ctx.body = `$ {query.cb} (服务端返回的数据)`
}

前端:

1.声明一个回调函数,把函数名当做参数值
2. 要传递给跨域请求的数据的服务器,函数形参要获取目标数据
3. 创建一个script标签把那个跨域的api数据接口地址赋值给script的src 还要在这个地址中向服务器传递该函数名

服务端:

4. 服务器接收到请求后需要再进行处理,把传递的参数名和它需要的数据拼接成一个字符串
5. 最后服务器把准备好的数据通过HTTP协议返回给客户端,客户端在调用执行声明的回调函数,对返回的数据进行操作