手写jsonp

2020-09-23  本文已影响0人  A_dfa4

标签的src属性不受浏览器跨域的限制

jsonp (url, cb) {
   /*声明一个唯一的回调函数并挂载到全局上
    *创建一个script标签地址 指向 请求服务器 将回调函数名作参数带到服务器
    *服务器拿到回调名称 并返回前端 该回调的调用 把返回结果当作参数传入 
    */
   let uniqueName = `jsonpCallback${new Date().getTime}`
   document.body.removeChild(script)
   delete window[uniqueName]

   window[uniqueName] = (res) = > {
    const script = doxument.createElement('script')
    script.src = `url${url.indexOf('?') > -1 ? '&': '?'}callback=${uniqueName}`   
    cb && cb(res)
  }
}

// 调用
jsonp(url, (res) => {
  console.log(res)
})

// 服务器端
1. 获取参数, 拿到回调函数名称
2. 返回参数名的前端回调的调用 并 把要返回的参数作为实参调用

/*弊端 - 只支持get请求,并且不安全*/

上一篇 下一篇

猜你喜欢

热点阅读