浅谈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已经成为 ...
随机推荐
- HMAILSERVER集成WEB邮件系统(ROUNDCUBE WEBMAIL)
hMailServer集成web邮件系统(Roundcube Webmail) 文/玄魂 前言 在上篇文章(使用hMailServer搭建邮件服务器)中,介绍了hMailServer的安装和简单配置. ...
- C# Argument 'picture' must be a picture that can be used as an Icon
Scenario: 创建了一个WinForm的小程序,希望将它显示在任务栏,所以在工具栏中的“公共控件”里,拖入NotifyIcon控件—notifyIcon1,这个是程序运行任务栏右侧通知区域图标显 ...
- 二进制转化为十进制Java实现
二进制转化为十进制 ①按权展开方法Java实现 /* * 按权展开法 */ public static double BinToTen1(String binary) { //查找该二进制是否存在小数 ...
- Linux巩固记录(5) hadoop 2.7.4下自己编译代码并运行MapReduce程序
程序代码为 ~\hadoop-2.7.4\share\hadoop\mapreduce\sources\hadoop-mapreduce-examples-2.7.4-sources\org\apac ...
- linux服务器的相关信息查看(端口占用,cpu、内存占用,防火墙,系统信息,vim编辑器使用等)
一.端口占用情况 https://www.cnblogs.com/CEO-H/p/7794306.html (1)查看所有端口.进程的使用情况:netstat -tunlp (2)查看某一端口的使 ...
- web socket 入门
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,其优雅地解决了以往web服务器不能向web客户端实时推送消息的问题. 在浏览器js环境中,创建一个websock ...
- psutil 跨平台根据程序名杀进程
笔者在项目中遇到过需要根据进程名杀进程的需求,利用python库psutil实现了此功能. 模块地址: https://pypi.python.org/pypi/psutil/ psutil功能 ...
- Node.js中的模块接口module.exports浅析
在写node.js代码时,我们经常需要自己写模块(module).同时还需要在模块最后写好模块接口,声明这个模块对外暴露什么内容.实际上,node.js的模块接口有多种不同写法.这里作者对此做了个简单 ...
- IDEA快捷键--与Eclipse快捷键的对比--IDEA快捷键设置成Eclipse默认快捷键
部分内容转载于:http://blog.csdn.net/dc_726/article/details/9531281 IntelliJ Idea 常用快捷键列表 Ctrl+Alt+t 选择代码块 t ...
- vtk文件编写
在paraview中加载vtk文件,可以很好的显示三维空间图像,如下cpp代码: #include <iostream> #include <fstream> #include ...