浅谈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并做处理!