您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

一篇文章实现vue集成axios、调用、跨域、配置多个跨域

时间:2020-10-09 11:18:36  来源:  作者:

前言

AxIOS是一个来自于vue官方推荐的一个用于与后端(JAVA、go、Pythonphp)进行数据交互的JavaScript库,你可以通过axios库快速高效的与后端进行数据交互,是现文件上传等复杂功能。

一篇文章实现vue集成axios、调用、跨域、配置多个跨域

 


一篇文章实现vue集成axios、调用、跨域、配置多个跨域

 


一篇文章实现vue集成axios、调用、跨域、配置多个跨域

 

JavaScript库:Axios

安装Axios:

将命令提示符切换到项目目录输入"npm install vue-axios --save"进行安装,在安装完毕后在main.js粘贴如下内容:

import axios from 'axios'

Vue.prototype.$axios = axios

便完成安装。

调用axios:

在安装完毕之后可以直接参考axios官方文档例子进行调用,在官网的基础上将axios替换成this.$axios即可完成调用。

例子:

简单请求:

this.$axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

编程式请求:

this.$axios({  method: 'post',  url: '/user/12345',  data: {    firstName: 'Fred',    lastName: 'Flintstone'  }});

所有的请求均完美支持axios官方Api,在原有api的基础上只需要将axios替换为this.$axios,其他部分按照官方例子即可。

怎样实现跨域:

什么是跨域:当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

在前端开发是解决跨域是需要前端与后端进行共同解决的,特别实在调试开发阶段前端配置跨域是非常重要且有必要的。

在配置跨域是需要vue.config.js+axios进行联合开发,从而实现前端的跨域能力,在后端没有配置跨域的情况下与后端实现数据交互,加快开发进度。

1、 vue.config.js(如没有请在根目录新建),具体代码如下(可直接拷贝):

2、 // Vue.config.js 配置选项

3、

4、 module.exports = {

5、 publicPath: "./",

6、 // 构建时的输出目录

7、 outputDir: "dist",

8、 // 放置静态资源的目录

9、 assetsDir: "static",

10、 transpileDependencies: [ /* string or regex */ ],

11、 // 是否为生产环境构建生成 source map?

12、 productionSourceMap: false,

13、 devServer: {

14、 open: true,

15、 host: 'localhost',

16、 port: 8080,

17、 https: false,

18、 //以上的ip和端口是我们本机的;下面为需要跨域的

19、 proxy: { //配置跨域

20、 '/ks': {

21、 target: 'http://search.kuwo.cn', //这里后台的地址模拟的;应该填写你们真实的后台接口

22、 ws: true,

23、 changOrigin: true, //允许跨域

24、 pathRewrite: {

25、 '^/ks': '' //请求的时候使用这个api就可以

26、 }

27、 },

28、 '/kp': {

29、 target: 'http://antiserver.kuwo.cn', //这里后台的地址模拟的;应该填写你们真实的后台接口

30、 ws: true,

31、 changOrigin: true, //允许跨域

32、 pathRewrite: {

33、 '^/kp': '' //请求的时候使用这个api就可以

34、 }

35、 }

36、 }

37、

38、 },

39、 }

2、怎样进行跨域调用:

在原有的axios开发的api基础上在链接前增加pathRewrite的名称如:

编程式请求:

this.$axios({  method: 'post',  url: '/ks/user/12345',  data: {    firstName: 'Fred',    lastName: 'Flintstone'  }});

便可实现跨域的功能。

配置多个领域:

在我们实际的开发中往往需要调用开发的api链接可能不一样(例如:图片链接api是a.com、天气链接是b.com),那么我们调试的时候需要配置两个跨域。

示例代码:

40、 module.exports = {

41、 publicPath: "./",

42、 // 构建时的输出目录

43、 outputDir: "dist",

44、 // 放置静态资源的目录

45、 assetsDir: "static",

46、 transpileDependencies: [ /* string or regex */ ],

47、 // 是否为生产环境构建生成 source map?

48、 productionSourceMap: false,

49、 devServer: {

50、 open: true,

51、 host: 'localhost',

52、 port: 8080,

53、 https: false,

54、 //以上的ip和端口是我们本机的;下面为需要跨域的

55、 proxy: { //配置跨域

56、 '/image: {

57、 target: 'http://a.com', //这里后台的地址模拟的;应该填写你们真实的后台接口

58、 ws: true,

59、 changOrigin: true, //允许跨域

60、 pathRewrite: {

61、 '^/image': '' //请求的时候使用这个api就可以

62、 }

63、 },

64、 '/wt': {

65、 target: 'http://antiserver.kuwo.cn', //这里后台的地址模拟的;应该填写你们真实的后台接口

66、 ws: true,

67、 changOrigin: true, //允许跨域

68、 pathRewrite: {

69、 '^/wt': '' //请求的时候使用这个api就可以

70、 }

71、 }

72、 }

73、

74、 },

75、 }

此时如果我们需要进行跨域请求。

请求图片:

this.$axios({  method: 'post',  url: '/image/user/12345',  data: {    firstName: 'Fred',    lastName: 'Flintstone'  }});

请求天气:

this.$axios({  method: 'post',  url: '/wt/user/12345',  data: {    firstName: 'Fred',    lastName: 'Flintstone'  }});

注意:

1、 跨域配置指的是在本地运行npm环境中跨域,在打包后还是需要服务器的支持和后端支持,直接打包上下并不会跨域。

2、 在配置多个跨域时请注意首位名字必须一致。

例子:

基于EuiAdmin+axios实现跨域与酷我音乐进行交互,实现音乐播放器例子:

一篇文章实现vue集成axios、调用、跨域、配置多个跨域

 

总结:

Vue集成axios为了能够在与后台实现数据交互,真正发挥前端的作用。实现前后端分离,构建前后端数据交互的通道,你也可以前往euiadmin.com获取源码帮助您理解。



Tags:vue   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  Tags: vue  点击:(1)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Tags: vue  点击:(14)  评论:(0)  加入收藏
开头最近要研究有什么新奇的产品和项目,发现一个网站很有意思,可以纯前端一键随机生成头像,刚好他们的代码是开源,并且基于vue3,我想开源拿出来给大家分享。效果: 开始项目本身基...【详细内容】
2021-12-03  Tags: vue  点击:(15)  评论:(0)  加入收藏
问题后端已经配置好了跨域,前端本地搭建vue-cli测试环境的时候如何解决跨域?(前提进行了基本的axios封装)分析这个时候后端API是一个明确的外网环境(使用外网IP或固定域名访问),...【详细内容】
2021-11-03  Tags: vue  点击:(55)  评论:(0)  加入收藏
一、Vue框架的开发流程介绍 当我们从github上下载一个前端模板框架到本地后,框架中经常会自带有一些跳转显示类的功能,我们可以通过查看这些功能是如何实现的,进而一步步改造为...【详细内容】
2021-11-03  Tags: vue  点击:(34)  评论:(0)  加入收藏
一、Vue介绍1、什么是Vue 可以独立完成前后端分离式web项目的JavaScript框架2、学习Vue的原因三大主流框架之一:Angular React Vue先进的前端设计模式:MVVM可以完全脱离服务器...【详细内容】
2021-10-22  Tags: vue  点击:(51)  评论:(0)  加入收藏
什么是vuevue是尤雨溪在2014年发布的一个渐进式的js框架,它有着双向绑定的特性,同时它的虚拟dom技术让性能得到大大提升。最重要的就是它是渐进式的应用,你可以在你的项目中逐...【详细内容】
2021-09-22  Tags: vue  点击:(77)  评论:(0)  加入收藏
前端框架:vue.js效果图: 图书管理显示,查询,删除 页面css样式:<style>* {margin: 0;padding: 0;}#app {width: 900px;padding: 20px;margin: 50px auto;box-shadow: 0 0 10px #82...【详细内容】
2021-09-17  Tags: vue  点击:(91)  评论:(0)  加入收藏
本文分享自华为云社区《【云驻共创】vue3相比 vue2 的十项优点》,作者: 海拥 。Vue3新版本的理念成型于 2018 年末,当时的 Vue 2 已经有两岁半了。比起通用软件的生命周期来这...【详细内容】
2021-09-16  Tags: vue  点击:(72)  评论:(0)  加入收藏
1.vue create demo2.vue ui3.搜索 vue-cli-plugin-electron-builder,勾选,安装4.npm run electron:serve5.npm run electron:build6.build complete!构建完成!构建完成后,看一...【详细内容】
2021-09-09  Tags: vue  点击:(63)  评论:(0)  加入收藏
▌简易百科推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(1)  评论:(0)  加入收藏
程序是如何被执行的&emsp;&emsp;程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(9)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(19)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(23)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(24)  评论:(0)  加入收藏
一个项目的大部分API,测试用例在参数和参数值等信息会有很多相似的地方。我们可以复制API,复制用例来快速生成,然后做细微调整既可以满足我们的测试需求1.复制API:在菜单发布单...【详细内容】
2021-12-14  AutoMeter    Tags:AutoMeter   点击:(20)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条