vue项目配置本地代理转发 | proxy

最新推荐文章于 2024-08-16 10:15:00 发布

JackieDYH

最新推荐文章于 2024-08-16 10:15:00 发布

阅读量4.2k

点赞数 3

分类专栏： Vue nodeJS 文章标签： proxy vue 代理转发配置本地代理转发

本文链接：https://blog.csdn.net/JackieDYH/article/details/108868795

版权

Vue 同时被 2 个专栏收录

334 篇文章 80 订阅

订阅专栏

nodeJS

38 篇文章 3 订阅

订阅专栏

这里的vue代理是 vue静态服务器做代理。使用的是 http-proxy-middleware 这个模块（这个模块相当于是node.js的一个插件）。

proxy配置代码

//vue-cli3.0 里面的 vue.config.js做配置 没有可以将自己建一个
devServer: {
	proxy: {
		// 这里监听一个别名，下面替换掉
		'/api': {     //这里最好有一个 /
			target: 'http://172.16.18.26:8081',  // 后台接口域名
			ws: true,        //如果要代理 websockets，配置这个参数
			secure: false,  // 如果是https接口，需要配置这个参数
			changeOrigin: true,  //是否跨域
			pathRewrite:{
				'^/api':'/screen'  //替换成
			}
		},
		'/login': {
			target: 'http://172.16.18.26:8081',
			changeOrigin: true,
			pathRewrite:{
				'^/login':''  //替换成空
			}
		}
	}
}

示例

http://172.16.18.26:8081/screen/index
http://localhost:8080/api/index --> http://172.16.18.26:8081/screen/index

http://172.16.18.26:8081/index
http://localhost:8080/login/index --> http://172.16.18.26:8081/index