记录一次前端配置代理踩坑，一个项目不同模块，请求不同的后台地址，前端代理该怎么配置

记录一次前端配置代理

开发项目的时候，遇到了一个小需求，项目中某一个模块的代码需要调用另外一个后台项目的接口，
前端在配置devServer的时候碰到了一个问题，因此记录一下。

---

一般项目都是直接通过axios前端请求封装的，这样子会在请求的时候，通过拦截，给全局请求接口拼接上 process.env.VUE_APP_BASE_URL所配置的 路径

所以，当我们在 config.js 里面去配置代理的时候，如果匹配到配置的路径，他就会转发这个请求到后台的地址。

'/api': {
                target: "http://www.baidu.com",
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '',
                }
            }

但是，当我们如果此时有一个地方不想调用百度了，想调www.jd.com怎么办，
我们可以在代理里面加上一个代理

'/jd': {
                target: "http://www.jd.com",
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/jd': '',
                }
            }

但是当我们请求的时候会发现，你接口的前缀并没有拼接上/jd，原因就是我们最开始配置的时候，在.env.development里面配置的就是/api，在请求封装的时候拼接的 baseURL 也是这个地址，那此时我们怎么办，才能成功的拼接到我们想要的/jd呢？

方法一

我们请求封装的时候，会对接口做一些处理，比如说要加全局的 loading ，或者要加额外的参数，比如 token，
因此我们可以通过对请求的 config 做处理，比如直接通过我们请求的 url路径才进行判断是需要拼接哪个代理的。

// 通过判断url来进行动态修改baseURL
config.baseURL = config.url.indexOf('/baidu')? '/api' : '/jd';

如果说不是一个呢，有很多个接口呢，也有朋友会说可以写成一个数组，通过数组里面包含与否 config.url来进行判断，其实还有另外一种方法。

方法二

我们可以通过在写 api 接口的时候，直接给当前的 url 地址配置baseURL，这样在经过全局封装的时候，便不会往前继续拼接 /api ，也可以达成我们的目的。

这样，在我们请求的时候，接口路径的前缀就会变成我们所想要的/jd ，并且能够成功转发到不同的后台地址了。

因为我baseURL设置了 /jd，接口路径上也有一个/jd所以会出现两个 /jd，至于不通，嘿嘿，因为接口路径是随便写的，不过放心，肯定能通过代理转发到后台地址的。

踩坑记录，也可能还有其他的办法，还请各位多交流一下。