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

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

 [[361307]]

前言:

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




JavaScript库:Axios

安装Axios:

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

  1. import axios from 'axios' 
  2.  
  3. Vue.prototype.$axios = axios 

 便完成安装。

调用axios

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

例子:

简单请求:

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

编程式请求:

  1. 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. 1、 vue.config.js(如没有请在根目录新建),具体代码如下(可直接拷贝): 
  2.  
  3. 2、 // Vue.config.js 配置选项 
  4.  
  5. 3、 
  6.  
  7. 4、 module.exports = { 
  8.  
  9. 5、 publicPath: "./"
  10.  
  11. 6、 // 构建时的输出目录 
  12.  
  13. 7、 outputDir: "dist"
  14.  
  15. 8、 // 放置静态资源的目录 
  16.  
  17. 9、 assetsDir: "static"
  18.  
  19. 10、 transpileDependencies: [ /* string or regex */ ], 
  20.  
  21. 11、 // 是否为生产环境构建生成 source map? 
  22.  
  23. 12、 productionSourceMap: false
  24.  
  25. 13、 devServer: { 
  26.  
  27. 14、 opentrue
  28.  
  29. 15、 host: 'localhost'
  30.  
  31. 16、 port: 8080, 
  32.  
  33. 17、 https: false
  34.  
  35. 18、 //以上的ip和端口是我们本机的;下面为需要跨域的 
  36.  
  37. 19、 proxy: { //配置跨域 
  38.  
  39. 20、 '/ks': { 
  40.  
  41. 21、 target: 'http://search.kuwo.cn', //这里后台的地址模拟的;应该填写你们真实的后台接口 
  42.  
  43. 22、 ws: true
  44.  
  45. 23、 changOrigin: true, //允许跨域 
  46.  
  47. 24、 pathRewrite: { 
  48.  
  49. 25、 '^/ks''' //请求的时候使用这个api就可以 
  50.  
  51. 26、 } 
  52.  
  53. 27、 }, 
  54.  
  55. 28、 '/kp': { 
  56.  
  57. 29、 target: 'http://antiserver.kuwo.cn', //这里后台的地址模拟的;应该填写你们真实的后台接口 
  58.  
  59. 30、 ws: true
  60.  
  61. 31、 changOrigin: true, //允许跨域 
  62.  
  63. 32、 pathRewrite: { 
  64.  
  65. 33、 '^/kp''' //请求的时候使用这个api就可以 
  66.  
  67. 34、 } 
  68.  
  69. 35、 } 
  70.  
  71. 36、 } 
  72.  
  73. 37、 
  74.  
  75. 38、 }, 
  76.  
  77. 39、 } 

 2、怎样进行跨域调用:

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

编程式请求:

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

便可实现跨域的功能。

配置多个领域:

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

示例代码

  1. 40、 module.exports = { 
  2.  
  3. 41、 publicPath: "./"
  4.  
  5. 42、 // 构建时的输出目录 
  6.  
  7. 43、 outputDir: "dist"
  8.  
  9. 44、 // 放置静态资源的目录 
  10.  
  11. 45、 assetsDir: "static"
  12.  
  13. 46、 transpileDependencies: [ /* string or regex */ ], 
  14.  
  15. 47、 // 是否为生产环境构建生成 source map? 
  16.  
  17. 48、 productionSourceMap: false
  18.  
  19. 49、 devServer: { 
  20.  
  21. 50、 opentrue
  22.  
  23. 51、 host: 'localhost'
  24.  
  25. 52、 port: 8080, 
  26.  
  27. 53、 https: false
  28.  
  29. 54、 //以上的ip和端口是我们本机的;下面为需要跨域的 
  30.  
  31. 55、 proxy: { //配置跨域 
  32.  
  33. 56、 '/image: { 
  34.  
  35. 57、 target: 'http://a.com', //这里后台的地址模拟的;应该填写你们真实的后台接口 
  36.  
  37. 58、 ws: true
  38.  
  39. 59、 changOrigin: true, //允许跨域 
  40.  
  41. 60、 pathRewrite: { 
  42.  
  43. 61、 '^/image''' //请求的时候使用这个api就可以 
  44.  
  45. 62、 } 
  46.  
  47. 63、 }, 
  48.  
  49. 64、 '/wt': { 
  50.  
  51. 65、 target: 'http://antiserver.kuwo.cn', //这里后台的地址模拟的;应该填写你们真实的后台接口 
  52.  
  53. 66、 ws: true
  54.  
  55. 67、 changOrigin: true, //允许跨域 
  56.  
  57. 68、 pathRewrite: { 
  58.  
  59. 69、 '^/wt''' //请求的时候使用这个api就可以 
  60.  
  61. 70、 } 
  62.  
  63. 71、 } 
  64.  
  65. 72、 } 
  66.  
  67. 73、 
  68.  
  69. 74、 }, 
  70.  
  71. 75、 } 

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

请求图片:

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

请求天气:

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

注意:

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

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

例子:

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

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

总结:

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

 

责任编辑:姜华 来源: 今日头条
相关推荐

2021-05-25 10:15:20

JavaScript 前端作用域

2021-06-15 07:32:59

Cookie和Sess实现跨域

2021-11-12 07:43:34

版本HDFS工具

2023-04-07 10:51:39

2019-04-10 10:32:16

CORSNginx反向代理

2010-07-30 12:48:13

Flex跨域调用

2022-05-25 08:31:31

ArthasInstrument

2016-11-01 21:51:03

phpjavascript

2020-10-09 08:15:11

JsBridge

2014-08-19 10:36:02

AngularCORS

2021-06-10 18:11:02

Cors跨域Web开发Cors

2021-04-27 15:20:41

人工智能机器学习技术

2022-11-29 21:26:26

跨域配置

2021-06-30 00:20:12

Hangfire.NET平台

2022-02-21 09:44:45

Git开源分布式

2023-05-12 08:19:12

Netty程序框架

2019-04-17 15:16:00

Sparkshuffle算法

2021-04-09 08:40:51

网络保险网络安全网络风险

2024-06-25 08:18:55

2024-05-20 09:28:44

Spring客户端浏览器
点赞
收藏

51CTO技术栈公众号