方法一——只能配置一个代理
客户端8080给服务端5000传递数据,但是由于存在跨域问题,需要配置代理
在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': ''}//一个正则表达式
//配置代理后请求路径会变成http://localhost:5001/api2,
//导致服务器端无法正确返回数据
//该操作能去掉请求路径中的/api2-->http://localhost:5001
}
}
}
}
/*
changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
changeOrigin默认值为true
*/
说明:
- 优点:可以配置多个代理,且可以灵活的控制请求是否走代理
http://localhost:5000/api //走代理,不优先匹配前端资源 http://localhost:5000 //不一定走代理,优先匹配前端资源
- 缺点:配置略微繁琐,请求资源时
必须加前缀
。