vue-cli webpack模板 Vue项目本地开发 nodejs反向代理及与nginx反向代理的区别

最新推荐文章于 2024-03-26 21:04:19 发布

原创

最新推荐文章于 2024-03-26 21:04:19 发布 · 966 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#http反向代理

本文介绍了在Vue本地项目中如何使用node.js进行反向代理，详细阐述了配置过程和访问地址。同时，对比了nginx的反向代理，指出两者在访问地址和替换方式上的区别，探讨了nginx更灵活的处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue本地项目node.js 反向代理
配置config文件夹下的index.js文件
配置见上图，target是后台电脑请求ip地址及端口，/weixinapi是标识符，当检测到请求路径里的/weixinapi的时候target将代替这个标识符之前的内容，
访问地址：http://localhost:8080
浏览器显示路径 http://localhost:8080/weixinapi/myinfqueryuser
通过反向代理后真实的路径 http://172.0.0.1:8700/weixinapi/myinfqueryuser
反向代理替换的只是原请求地址的域名，不是标识符之前的所有内容。

2.nginx反向代理
（1）访问地址反向代理
在这里插入图片描述

通过localhost 反向代理访问地址 http://localhost:8080
直接使用http://localhost:8080访问请求的接口是无效的。
（2）请求地址反向代理

配置见上图，proxy_pass是后台电脑请求ip地址及端口和识别标识符，/weixinapi是标识符，当检测到请求路径里的/weixinapi/的时候proxy_pass将代替这个标识符之前的内容，
浏览器显示请