浅谈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已经成为 ...
随机推荐
- [Proposal]Transform ur shapes!
[Name] Transform ur shapes [Motivation]市场上有很多涂鸦游戏,例如火柴人涂鸦,非常有趣 我们可以结合所学,将一些图形变形的操作融入进去,做一个我们自己的有趣的游戏 ...
- 【转载】Configure the max limit for concurrent TCP connections
转载地址:http://smallvoid.com/article/winnt-tcpip-max-limit.html To keep the TCP/IP stack from taking al ...
- 报错:Missing type map configuration or unsupported mapping
报错:Missing type map configuration or unsupported mapping □ 背景 当把View Model转换成Domain Model保存的时候,发生在Au ...
- 吐嘈OpenCV的图像旋转功能 >_<7
實在出乎我的意料!OpenCV竟然連這么簡單的功能都沒有封裝!還要讓本大爺自己動手寫!強烈要求OpenCV下一個版本添加本功能! 函數功能和這個網頁一樣,只不過這個作者寫的太糟了,我把它變得簡潔了一點 ...
- 关于错误 openssl/ssl.h:没有那个文件或目录的解决办法
原文链接:https://blog.csdn.net/kulala082/article/details/68484314 首先得安装openssl:sudo apt-get install open ...
- springboot2 生产部署注意事项【持续更新】
注意事项1. 去除不需要的 jar 开发工具 jar :springs-boot-devtools2. 监控一定要做好权限制或者去除 控制 jar :spring-boot-starter-actua ...
- Maven - Maven速成
Maven Maven是一个项目构建和管理工具,有助于开发者快速完成项目的配置,快速建立开发环境,从而提高开发效率. 管理项目构建(build)的生命周期(清理.编译.测试.打包.发布.部署.报告等) ...
- C#连接Access2013
今天测试连接Access2013数据库,遇到错误,综合几个大神建议,解决了 我的系统是windows 2008 64位的,连接字符串如下: <connectionStrings> < ...
- iOS-button利用block封装按钮事件【runtime 关联】
用block封装最常用的就是网络请求的回调,其实也可以结合category封装button的按钮事件,同时利用runtime的对象关联: UIButton+wkjButton.h 文件 #import ...
- 课程一(Neural Networks and Deep Learning),第四周(Deep Neural Networks)—— 1.Practice Questions: Key concepts on Deep Neural Networks
[解释] [解释] 比如算法中的learing rateα(学习率).iterations(梯度下降法循环的数量).L(隐藏层数目).n[l] (隐藏层单元数目).choice of activati ...