浅谈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并做处理!
浅谈JSONP (vue-jsonp组件 XXXtoken:报错处理)的更多相关文章
- vue init webpack nameXXX 报错问题:
vue新建demo项目报错如下: M:\lhhVueTest>vue init webpack L21_VueProject vue-cli · Failed to download repo ...
- 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题
2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...
- vue 表单校验报错 "Error: please transfer a valid prop path to form item!"
vue 表单校验报错 "Error: please transfer a valid prop path to form item!" 原因:prop的内容和rules中定义的名称 ...
- vue中使用JSX报错,如何解决
Support for the experimental syntax 'jsx' isn't currently enabled (32:12): 30 | }, 31 | render() { & ...
- vue Blob 下载附件报错
vue Blob 下载附件报错,不妨试试: window.location.href=后台地址
- 解决分批次调用 jsonp 接口的 callback 会报错问题
当我们分批次调用同一个jsonp接口时,会有一定机率同时调用,而jsonp的callback不支持同时调用, 会报错,所以当我们在分批次调用同一jsonp接口时,最好在callback后加个变量值,总 ...
- VUE之命令行报错:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead 解决办法
Failed to compile. ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-5992 ...
- Vue tools开发工具报错Cannot read property '__VUE_DEVTOOLS_UID__' of undefined
使用 vue tools 开发工具,不显示调试面板中的组件,点击控制台报错: Cannot read property 'VUE_DEVTOOLS_UID' of undefined 在 main.j ...
- vue.js常见的报错信息及其解决方法的记录
1.Vue packages version mismatch 翻译:vue包版本匹配错误 报错样例: 报错原因:通常出现于一些依赖库的更新或者安装新的依赖库之后(可以认为npm update已经成为 ...
随机推荐
- [ASE][Daily Scrum]11.07-11.09
周五-周日的任务计划统一布置了,在昨天我们已经将所有开发环境.开发工具.以及服务器问题敲定,接下来就是整个游戏的框架以及细节实现,首先打算在本周末将各个部分的通信接口确定下来,这样之后大家就可以专注于 ...
- MySQL--eq_range_index_dive_limit参数学习
官方文档如下描述:This variable indicates the number of equality ranges in an equality comparison condition w ...
- Windows核心编程:第11章 Windows线程池
Github https://github.com/gongluck/Windows-Core-Program.git //第11章 Windows线程池.cpp: 定义应用程序的入口点. // #i ...
- 【WEB前端】CSS书写规范
古语有云:不以规矩,不成方圆.不管是国还是家还是...都得有规矩加以约束.同样,在我们程序猿的代码中也有一定的规矩——W3C标准,但是我今天不会讲那么高深的道理,我只想说说,我近些日子在开发中所总结出 ...
- ionic 2.x 3.x项目结构解析
myApp │ config.xml //项目配置文件,包名.名称.minSdkVersion等都在此处配置 │ ionic.config.json │ package.json //项目依赖文件列表 ...
- 【计算机网络】 网络体系结构分类: 客户机/服务器体系和P2P
网络体系结构的分类 现代网络应用程序有两种主流的体系结构: 客户机/服务器体系结构和P2P体系结构(peer to peer “对等”) 一 . 客户机/服务器体系结构 客户机/服务器体系 ...
- 《Python黑帽子:黑客与渗透测试编程之道》 自动化攻击取证
工具安装: 下载源码:https://code.google.com/archive/p/volatility/downloads 工具配置: 获取内存镜像:https://www.downloadc ...
- 前端基础-html 字体标签,排版标签,超链接,图片标签
主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- storm安装以及简单操作
storm的安装比较简单,下面以storm的单节点为例说明storm的安装步骤. 1.storm的下载 进入storm的官方网站http://storm.apache.org/,点击download按 ...
- linux 时间相关
CentOS7 正确修改时区方法 ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime