浅谈JSONP (vue-jsonp组件 XXXtoken:报错处理)

由于同源策略的存在,特别是前后端两个项目存在的情况下,客户端访问服务端必然存在跨域的情况,而使用jsonp,则不存在这个问题。

主要是因为jsonp是在页面中插入一段js代码,而请求返回的也是一段js代码,插入到页面中。

与json请求的差别是jsonp请求后台是需要带一个callback的参数(该参与可以与后台协商命名),后台识别到callback参数后,会生成一段js格式的数据返回到页面也就是=》callBackFun+'('+json+')';

可以看做,返回了一个方法调用,即方法名中的参数为需要获取的对象,前台解析即可。

在VUe中使用JSOnP,引用了vue-jsonp插件:

详细查看github即可:https://github.com/LancerComet/vue-jsonp

getData:function() {
  this.$jsonp('https://api.douban.com/v2/book/1220562', null).then(json => {
    console.log(json);
    // Success.
  }).catch(err => {
    // Failed.
  })
},

注意:服务端需要识别jsonp并做处理!

posted @ 2018-01-31 17:28  code_文文  阅读(3752)  评论(0编辑  收藏  举报