由于同源策略的存在,特别是前后端两个项目存在的情况下,客户端访问服务端必然存在跨域的情况,而使用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. RNN以及LSTM的介绍和公式梳理

    前言 好久没用正儿八经地写博客了,csdn居然也有了markdown的编辑器了,最近花了不少时间看RNN以及LSTM的论文,在组内『夜校』分享过了,再在这里总结一下发出来吧,按照我讲解的思路,理解RN ...

  2. Page_Load是怎样被执行的

    关于Asp.Net的生命周期的文章,很多很多,不管是管道生命周期,还是页面生命周期,图文并茂的文章并不少,我就不说了,我只是在复习这些知识点的时候,想具体知道一个页面的Page_Load方法到底是怎么 ...

  3. C# 根据偶数、奇数加载不同颜色

    效果图: C#后台代码 //偶数随机 Random evenRanm = new Random(); //奇数随机 Random oddRanm = new Random(); string[] li ...

  4. WPF TreeView BringIntoViewBehavior

    由于项目需要,需要能够定位TreeView中的点,TreeView的节点数过多的情况下,即使找到了对应的节点并选中展示了,由于不在可视区域内,给用户的感觉还是不好,因此设计如下的Behavior,来实 ...

  5. Linux基础命令-mkdir

    mkdir 作用:创建目录 主要参数:-p $ cd /home/test $ mkdir caianchun $ ls caianchun -p:递归参数 $ mkdir caianchun2/1/ ...

  6. 09_python_初始函数

    一.定义 函数是对功能和动作的封装 def functionname( parameters ): "函数_文档字符串" function_suite return [expres ...

  7. XSS 跨站脚本攻击 的防御解决方案

    虽然说在某些特殊情况下依然可能会产生XSS,但是如果严格按照此解决方案则能避免大部分XSS攻击. 原则:宁死也不让数据变成可执行的代码,不信任任何用户的数据,严格区数据和代码. XSS的演示 Exam ...

  8. mysql存储过程双重循环示例

    BEGIN ); DECLARE done INT DEFAULT FALSE; DECLARE cursor_rule CURSOR FOR SELECT s.id FROM d_menu_type ...

  9. 【wireshark】插件开发(五):C插件

    1. Wireshark对C插件的支持 每个解析器解码自己的协议部分, 然后把封装协议的解码传递给后续协议. 因此它可能总是从一个Frame解析器开始, Frame解析器解析捕获文件自己的数据包细节( ...

  10. spring mvc 使用kaptcha配置生成验证码实例

    SpringMVC整合kaptcha(验证码功能) 一.依赖 <dependency> <groupId>com.github.penggle</groupId> ...