vue中proxy代理的讲解

vue中proxy代理的理解

今天开发的时候 意外发现对vue的代理有了新的理解，以前都是很模糊的状态，先看图吧。

 

1、proxy里面是个大对象，如果有多个代理，直接在后面加子对象，实际开发中可能不止接口代理还有图片上传下载代理。
2、整个代理流程如何？
①首先得知道什么是代理，为什么需要代理？
代理：顾名思义就是代替别人做某事，到开发中也是这样，因为本地开发时基于node服务器进行开发，是不能直接请求后端的接口，一旦直接请求会报跨域错误，（不信可以试试把url直接写成后端地址，这时就会报错）如果这样的话，那如果知道后端地址，任何一台电脑都可访问了，所以处于各种考虑，禁止本地直接发起请求，必须要让中间一个人代替你去完成，这时候就诞生了代理。
②流程：
‘/api’：他是指遇到这个字符开头的话，在这个字符前面加上target里面的ip或者域名。
比如：/api，前的localhost：9999变成target的内容
完整的路径变成了http:xxx/xxx/api/manager/manager
但是有个问题，实际接口当中没有这个api，所以下面的pathwrite重写就解决这个问题的。他识别到api开头就会把/api重写成空，那就是不存在这个/apil了，完整的路径又变成：http:xxx/xxx/manager/manager

 

 

 这里有个小小的问题（如图）：实际开发中我们会发现有的人target域名后携带/，然后重写的时候也会有个/,按照上述转换的话就会多出斜杠，首先这个理解没错的，但实际上vue的代理中间件会自动处理成合规合法的地址，所以加不加都行。

 

 鉴于文字太麻烦，我把流程写在图上吧

 

 

转自：https://blog.csdn.net/X_W123/article/details/120369610