江苏龙网

  1. 主页 > 生活百科 > >

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

vue


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获取源码帮助您理解 。

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


推荐阅读


上一篇：AndroidStudio构建安卓项目之helloworld

下一篇：大学学习成绩排名怎么算？