jsonp

前后端约定callback参数给后端，后端返回数据时会将这个callback参数的值作为函数名，JSON数据作为参数， 客户端收到响应后，自动执行前端自定义的这个函数。

后端：

    async jsonp (ctx) {
    // 前端传过来的参数
    const query = ctx.request.query
    // 设置一个cookies
    ctx.cookies.set('tokenId', '1')
    // query.jsonpCallBack是前后端约定的方法名字，其实就是后端返回一个直接执行的方法给前端，由于前端是用script标签发起的请求，所以返回了这个方法后相当于立马执行，并且把要返回的数据放在方法的参数里。
    ctx.body = `${query.jsonpCallBack}(${JSON.stringify(successBody({msg: query.msg}, 'success'))})`
  }  

前端：

const request = ({url, data}) => {
  return new Promise((resolve, reject) => { 
    // 动态创建script标签
    const script = document.createElement('script')
    // 接口返回的数据获取
    window.jsonpCallBack = (res) => {
      document.body.removeChild(script)
      delete window.jsonpCb
      resolve(res)
    }
    script.src = `${url}?&jsonpCallBack=jsonpCallBack`
    document.body.appendChild(script)
  })
}
// 使用方式
request({
  url: 'http://localhost:9871/api/jsonp',
  data: {
    // 传参
    msg: 'helloJsonp'
  }
}).then(res => {
  console.log(res)
})