由于同源策略的存在,特别是前后端两个项目存在的情况下,客户端访问服务端必然存在跨域的情况,而使用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. mooctest项目总结 【转载】

    原文链接 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

  2. Win7下无法启动sql server fulltext search (mssqlserver)的问题

    在Win7下安装了SQL Server 2005, 但启动“SQL Server FullText Search (MSSQLSERVER)”服务时启动不成功,系统日志显示“SQL Server Fu ...

  3. python实现Telnet远程登陆到设备并执行命令

    #encoding=utf-8 import telnetlib import time def do_telnet(Host, username, password, finish, command ...

  4. Windows核心编程:第6章 线程基础

    Github https://github.com/gongluck/Windows-Core-Program.git //第6章 线程基础.cpp: 定义应用程序的入口点. // #include ...

  5. 一场关于 .net core 和 .net framework 编码的案情分析

    案情背景 目前公司做新项目,基本所有新项目都是用.net core来做,旧项目一半还是基于 .net framework下面,一半已经迁移到了core平台.在做新项目的时候,有个功能需要对接到旧项目那 ...

  6. Hiho #1075: 开锁魔法III

    Problem Statement 描述 一日,崔克茜来到小马镇表演魔法. 其中有一个节目是开锁咒:舞台上有 n 个盒子,每个盒子中有一把钥匙,对于每个盒子而言有且仅有一把钥匙能打开它.初始时,崔克茜 ...

  7. API网关【gateway 】- 1

    最近在公司进行API网关重写,公司内采用serverMesh进行服务注册,调用,这里结合之前学习对API网关服务进行简单的总结与分析. 网关的单节点场景: 网关的多节点场景: 这里的多节点是根据模块进 ...

  8. 使用wget命令爬取整站

    快速上手(整个bootstrap网页全被你抓取下来了~_~) wget -c -r -npH -k -nv http://www.baidu.com 参数说明 -c:断点续传 -r:递归下载 -np: ...

  9. idea 映射文件同class文件一起打包安装

    经过几天的摸索,已经能够用idea做日常的Demo了,在复习的过程中,又在学的知识,所以进度有点慢,但自己好像有点着急,为自己的效率 但是自己也是知道的,只顾速度,最后的学完的效果也不是自己想要的,所 ...

  10. Swift5 语言指南(二十四) 泛型

    通用代码使您能够根据您定义的要求编写可以使用任何类型的灵活,可重用的函数和类型.您可以编写避免重复的代码,并以清晰,抽象的方式表达其意图. 泛型是Swift最强大的功能之一,Swift标准库的大部分内 ...