Vue脚手架配置代理

方法一

在vue.config.js中添加如下配置：

devServer:{
	proxy:"http://localhost:5000"
}

说明：

• 优点：配置简单，请求资源时直接发送给前端即可。
• 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
• 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器。

方法二

编写vue.config.js配置具体代理规则：

module.exports={
	devServer:{
		proxy:{
			'/api1':{	//匹配所有以'/api1'开头的请求路径
				target:'http://localhost:5000',	//代理目标的基础路径
				changeOrigin:true,
				pathRewrite:{'^/api1':''}
			},
			'/api2':{	//匹配所有以'/api2'开头的请求路径
				target:'http://localhost:5001',	//代理目标的基础路径
				changeOrigin:true,
				pathRewrite:{'^/api2':''}
			},
		}
	}
}
/*
changeOrigin设置为true时，服务器收到的请求头肿的host为：localhost:5000
changeOrigin设置为false时，服务器收到的请求头肿的host为：localhost:8000
changeOrigin默认值为true
*/

说明：

• 优点：可以配置多个代理，且可以灵活控制请求是否走代理
• 缺点：配置略微繁琐，请求资源时必须加载前缀