vue 项目 proxy 跨域配置的理解

  我们在本地开发时,vue.config.js 文件中配置了如下开发服务,此服务只在本地开发时生效,打包到服务器之后这里的配置是无效的,实际代理到nginx去了

    

(pathRewrite 这里要理解成用'/api'代替target里面的地址,后面的组件中我们调用接口的时候直接用api代替,比如我要调用'http://192.168.50.250:8081/user/add',直接写成'/api/user/add'即可)

原文解析

 

   那么在进行axios封装的时候,request.ts文件里面的 baseURL 可以设置为 "/api",

   

 这就解决疑惑:proxy 代理里面为什么要找带有 '/api' 的路径?从哪儿找?是后端的接口路径里面已经设置的?

 答案就是 '/api' 在前端进行axios封装的时候自己加的,更详细解析如下:

 原文解析

 

  前端的调试窗口永远都不会显示你代理更改后的路径,而是显示原来的路径,这并不代表代理没生效,判断代理生没生效要通过看后端是否接收到前端发送的数据。

     

 proxy 就是利用了 Node 代理,原理还是因为跨域是存在于浏览器的,服务器端没有跨域这一说嘛,那么我们就通过 node 作为服务器去请求后端的服务器数据。

结论:

本地请求: http://localhost:8000/api/zzz/one

代理后请求: http://XX.XX.XX.XX:8084/api/zzz/one

设置pathRewrite后的请求: http://XX.XX.XX.XX:8084/zzz/one (真正发送给后端的请求)

 

分析到这里我又疑惑了,既然浏览器现在是和本地服务( http://localhost:8000)交流,那就不存在跨域了,为什么还要费劲去设置 '/api' ,设置完后又要把它去掉?

  猛一想,浏览器和本地服务交流是不存在跨域了,那本地服务又怎么和后端服务交流呢?所以呀,又回到一开始,设置代理 target 主要是为了告诉 node 真正请求的地址是什么。

浏览器和node交流时使用的是本地服务http://localhost:8000/api/zzz/one,然后node再去和后端服务器请求数据 pathRewrite 后用的是http://XX.XX.XX.XX:8084/zzz/one(待确定。。。)

 

posted @ 2022-07-29 11:46  打遍天下吴敌手  阅读(2103)  评论(0编辑  收藏  举报