一、解决单个接口地址跨域
法一:
1、在main.js中加入以下代码:
import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/lhxt' //关键代码,默认加入公共url
2、在config文件下的index.js文件中加入你想要反向代理的服务地址的前缀,名称要与上面给axios加入的公共url名称一致
3、这个是封装的post请求,调用接口的时候直接传入除了服务地址前缀的后面地址即可
4、重启运行就好啦~~~
由于我们给url加了反向代理的公共前缀/lhxt,因此我们访问/user/getMenu的时候,就相当于如下如图所示,访问的是localhost:9999/lhxt/user/getMenu,此时就可以看到我的localhost:9999反向代理/lhxt的服务器地址192.168.10.222:8080,
法二:
1、此时不需要配置公共的baseUrl,因此在main.js中可以不用添加任何代码
2、第二步和法一的第二步一样
3、这个方法没有配置公共baseUrl的前提是,如果你的所有接口地址的端口后面都会有一个公共部分,比如就是/lhxt,这样的话,既然访问接口的时候有一个公共部分,那么当然就不需要在第一步去配置公共的baseUrl了,如下图,我的每个接口都有这个前缀
二、解决多接口跨域
1、此时不需要配置公共的baseUrl,因为是多个服务跨域的问题,在第二步配置的地址也会不一样,因此不能配置公共的,公共的baseUrl只试用与解决一个服务的跨域
2、在config文件下的index.js文件中加入你想要反向代理的服务地址的前缀,多个服务,就写多个呗,名称可以随意命名,调用的时候对应上就行
3、配置完成之后,使用的时候如下
可以在你要使用的接口的地方加上对应想代理的服务的前缀,不同的服务地址,就加上不同的代理地址的前缀
如果用的多的话,可以直接在单独封装一个用于访问api的post请求,并在它的url中加上这个前缀
使用的时候url不变就行了