1. 方法一
在vue.config.js中添加如下配置
本地访问域名: http://localhost:8080/
api地址: https://school.qifuxiong.com/api/test/signs
# vue.config.js文件中
devServer: {
proxy: 'https://school.qifuxiong.com'
}
# 前端请求demo
methods:{
getStudents(){
axios.get('http://localhost:8080/api/test/signs')
.then(
response=>{
console.log('请求成功了',response.data)
}
)
}
}
说明
- 优点: 配置简单, 请求资源时直接发给前端(8080)即可;
- 缺点: 不能配置多个代理, 不能灵活的控制请求是否走代理;
- 工作方式: 若按照上述配置代理, 当请求了前端不存在的资源时, 那么该请求会转发给服务器(优先匹配前端本地根目录资源)
2.方法二
编写vue.config配置具体代理规则
# vue.config.js文件中
# `/api` 是请求前缀, 如果请求前缀是这个, 走代理; 不是这个, 不走代理;
# `^/api':''` 所有以api开头的路径替换为空字符串
devServer: {
proxy: {
'/api': {
target: 'https://school.qifuxiong.com',
pathRewrite: {'^/api': ''}, // 下面这个配置的作用是, 把`/api/api地址`转发给服务器的只有`api地址`, 去掉`/api`
ws: true, // websocket 用于支持websocket,不写也默认true
changeOrigin: true, //不写也默认true,用于控制请求头中的host值
}
}
}
# 前端请求demo
methods:{
getStudents(){
axios.get('http://localhost:8080/api/api/test/signs').then(
response=>{
console.log('请求成功了',response.data)
}
)
}
}
说明:
- 优点: 可以配置多个代理, 且可以灵活的控制请求是否走代理
- 缺点: 配置略微繁琐, 请求资源时必须加前缀