最近做练习demo的时候再一次遇到了前端代理请求，一开始的时候打算按照传统从已有的项目中将这部分的代码直接copy过来，但是突然想到现在用的是vite+ts+vue3的框架，之前已有的项目用的是vue-cli+js+vue2，不能直接照搬，于是乎先百度 [vite proxy http]，出来了很多与之相关的内容，找了一个最靠谱的copy之。但后面发现好像并没有成功，因为浏览器依旧在提醒我跨域了。于是乎重新找了各种资料，浅浅地研究了一下前端代理请求这块儿，现在将收获记录在这里，以防我后面搞忘了又要去到处找原因。
首先说一下原理，它就像一个中转站，本来页面上的各种请求是直接到后端服务器上，但是因为跨域的原因（如果后端设置了请求头则没有这个问题，这里暂时不展开这个话题），后端接受不到这个请求，于是我们先访问本地的代理服务器（中转站），它再将本地的请求转发到后端服务器，服务器与服务器之前通信就不会有跨域的问题了。大概就是这样。
再来说下怎么运用到项目中。项目中使用axios的时候会设置一个baseUrl，假如为：'/api'，发送请求的时候还会有一个具体的url，假如为：'/user/login'，那么整个请求完整的路径就为：'/api/user/login'，如果是后端处理跨域的话，这个时候直接将baseUrl设置成后端地址就好：'http://127.0.0.1:3000/'，那么完整的请求就为：'http://127.0.0.1:3000/user/login'，就可以直接访问了。如果需要设置代理，那么baseUrl就不能为一个具体的地址，而是对应代理中设置的key，即proxy对象的属性名，vite中清楚的说明了这点：（vite官网：https://cn.vitejs.dev/config/server-options.html#server-host）
vite中proxy的例子：
红框圈中的部分属于比较通用的例子，我也是用的这种配置方法。
此时项目中的请求的访问就变成了：http://localhost:3000/api/bar -> http://target/bar
