关于vue中proxy代理的一些理解

最新推荐文章于 2024-09-20 15:08:18 发布

super美少女战士

最新推荐文章于 2024-09-20 15:08:18 发布

阅读量2.3k

点赞数 7

分类专栏：前端 vue element ui 文章标签： vue.js node.js javascript

本文链接：https://blog.csdn.net/X_W123/article/details/120369610

版权

本文介绍了Vue.js开发中使用Proxy代理的原因和工作原理。通过代理，开发者可以在本地开发环境中解决跨域问题，避免直接请求后端接口导致的安全问题。代理过程包括：识别以'/api'开头的路径，将该路径前的本地服务器地址替换为target指定的远程地址，并通过pathRewrite重写去掉'/api'前缀，确保实际接口路径的正确性。文章还指出，尽管target后的斜杠可能导致多余的路径分隔符，但Vue的代理中间件会自动处理，因此添加与否并不影响结果。

摘要由CSDN通过智能技术生成

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了