方式一:
在vue.config.js中配置
module.export = {
// 开启代理服务器
devServer: {
proxy: 'http://localhost:5000' // 服务器端口号是多少这个5000对应替换即可
}
}
如何使用(比如前端端口号是8080, 后端端口号是5000):
axios.get('http://localhost:8080/students') // 这时候后端地址端口号就要换成前端
缺点:配置简单,请求资源时直接发给前端(8080)即可
优点:不能配置多个代理,不能灵活的控制请求是否走代理
工作方式:若按上述配置代理,当请求了前端不存在的资源,那么该请求会转发给服务器(注意,优先匹配前端资源,即public文件夹下是否有该路径名的文件)
方式二:
在vue.config.js中配置
module.export = {
// 开启代理服务器
devServer: {
proxy: {
// api代表请求前缀,只要请求前缀是api那么就开启
'api': {
target: 'http://localhost:5000',
pathRewrite: {'^/api': ''}, // 匹配所有的/api正则替换成空字符串,重写路径
ws: true, // 用于支持websocket
changeOrigin: false // false代表代理服务器会实话实说自己来自哪里(端口号8080),true代表会撒谎说自己来自于5000
}
}
}
}
如何使用(比如前端端口号是8080, 后端端口号是5000,端口号后面加前缀api):
axios.get('http://localhost:8080/api/students') // 这时候后端地址端口号就要换成前端
缺点:配置略微繁琐,请求资源时必须加前缀
优点:可以配置多个代理,且可以灵活控制请求是否走代理