由于同源策略的存在,特别是前后端两个项目存在的情况下,客户端访问服务端必然存在跨域的情况,而使用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:报错处理)的更多相关文章

  1. vue init webpack nameXXX 报错问题:

    vue新建demo项目报错如下: M:\lhhVueTest>vue init webpack L21_VueProject vue-cli · Failed to download repo ...

  2. 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题

    2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...

  3. vue 表单校验报错 "Error: please transfer a valid prop path to form item!"

    vue 表单校验报错 "Error: please transfer a valid prop path to form item!" 原因:prop的内容和rules中定义的名称 ...

  4. vue中使用JSX报错,如何解决

    Support for the experimental syntax 'jsx' isn't currently enabled (32:12): 30 | }, 31 | render() { & ...

  5. vue Blob 下载附件报错

    vue Blob 下载附件报错,不妨试试: window.location.href=后台地址

  6. 解决分批次调用 jsonp 接口的 callback 会报错问题

    当我们分批次调用同一个jsonp接口时,会有一定机率同时调用,而jsonp的callback不支持同时调用, 会报错,所以当我们在分批次调用同一jsonp接口时,最好在callback后加个变量值,总 ...

  7. 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 ...

  8. Vue tools开发工具报错Cannot read property '__VUE_DEVTOOLS_UID__' of undefined

    使用 vue tools 开发工具,不显示调试面板中的组件,点击控制台报错: Cannot read property 'VUE_DEVTOOLS_UID' of undefined 在 main.j ...

  9. vue.js常见的报错信息及其解决方法的记录

    1.Vue packages version mismatch 翻译:vue包版本匹配错误 报错样例: 报错原因:通常出现于一些依赖库的更新或者安装新的依赖库之后(可以认为npm update已经成为 ...

随机推荐

  1. java 异步机制与同步机制的区别

    所谓异步输入输出机制,是指在进行输入输出处理时,不必等到输入输出处理完毕才返回.所以异步的同义语是非阻塞(None Blocking). 网上有很多网友用很通俗的比喻  把同步和异步讲解的很透彻 转过 ...

  2. ubuntu 安装CUDA 8.0

    安装CUDA 8.0 1) 在终端运行指令 sudo sh cuda_8.0.44_linux.run --no-opengl-libs 不加这个选项会进入循环登陆 2) 之后是一些提示信息,输入ac ...

  3. 关于ubuntu软件卸载的问题

    ...... 起因很菜....就是手贱把/usr/lib/下的R的目录给rm -rf掉了, 然后在R的软件包里用./configure也生不成, R RHOME还在, 然而因为lib下的R删掉了所以R ...

  4. .NetCore WebApi + Vue +MySql搭建博客

    因为我是一直写C#的,所以最近闲暇时间一直在学习.NET Core,该博客的后端使用的就是.NET Core WebApi然后加前端Vue. 首先后端.NET Core搭的框架是一个仓储层+服务层+A ...

  5. 使用Squid部署代理服务

    Squid是Linux系统中最为流行的一款高性能代理服务软件,通常用作Web网站的前置缓存服务,能够代替用户向网站服务器请求页面数据并进行缓存.简单来说,Squid服务程序会按照收到的用户请求向网站源 ...

  6. cad.net的undo返回操作

    这是提供给许多从lisp转移到c#的开发人员的一个函数,这个函数利用后绑代码实现undo返回操作. 本代码由edata提供: edata博客 /// <summary> /// 命令动作编 ...

  7. Swift5 语言指南(二十) 类型转换

    类型转换是一种检查实例类型的方法,或者将该实例视为与其自己的类层次结构中的其他位置不同的超类或子类. Swift中的类型转换是使用is和as运算符实现的.这两个运算符提供了一种简单而富有表现力的方法来 ...

  8. element-ui table 最后一行合计,单元格合并

    接着写两个方法--最后一行合计的方法 --单元格合并的方法 先写一个rowspan方法,计算出spanArr数组是怎么单元格合并的,注意rowspan方法要在渲染完成之前使用,可以在mounted中使 ...

  9. abp 使用 hangfire结合mysql

    abp 官方使用的hangfire 默认使用的是sqlserver的存储 需要引入支持mysql的类库 我这边使用的是Hangfire.MySql.Core 直接用nuget安装即可 首先按照官方文档 ...

  10. python 相关模块安装 国内镜像地址

    python 相关模块安装 国内镜像地址 pipy国内镜像目前有: http://pypi.douban.com/  豆瓣 http://pypi.hustunique.com/  华中理工大学 ht ...