vue解决跨域--反向代理多服务或单个服务地址

一、解决单个接口地址跨域

法一：

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不变就行了