配置代理步骤:配置参考文档:Vue-Cli devServe.proxy
1. 下载axios库:npm install axios
vue.config.js是一个可选的配置文件,如果项目的(和package.json同级)根目录中存在这个文件,那么它会被
@vue/cli-service自动加载。你也可以使用package.json中的vue字段,但是注意这种写法需要严格遵照JSON格式来写
方法一:
在vue.config.js中添加如下配置:
module.exports = {
//开启代理服务器(方式一)
devServer: {
proxy: 'http://localhost:5000'
}
}
说明:
(1)优点:配置简单,请求资源时直接发给前端(8080)即可
(2)缺点:不能配置多个代理,不能灵活的控制请求是否走代理
(3)工作方式:若按照上述配置代理,当请求了前端不存在的资源时,才会将请求转发给服务器(优先匹配前端资源)
方法二:
编写vue.config.js配置具体代理规则:
module.exports = {
//开启代理服务器 (方式二)
devServer: {
proxy: {
'/api1':{ //匹配所有以'/api1'为前缀的开头的请求路径
target: 'http://localhost:5000', //代理目标的基础路径
pathRewrite: {'^/api1' : ''},//代理往后端服务器的请求去掉/api1前缀
ws: true, //用于支持webSocket,默认值为true
changeOrigin: true,//用于控制请求头中的host值,默认值为true
},
'/api2':{
target: 'http://localhost:5001',
pathRewrite: {'^/api2' : ''},
changeOrigin: true,
},
}
}
}
// changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
// changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
// changeOrigin默认值为true
说明:
(1)优点:可以配置多个代理,且可以灵活的控制请求是否走代理
(2)缺点:配置略微繁琐,请求资源时必须加前缀
配置代理服务器后就可以请求了:src/App.vue
<template>
<div>
<button @click="getStudents">获取学生信息</button>
<button @click="getCars">获取汽车信息</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'App',
methods: {
getStudents() {
axios.get('http://localhost:8080/students').then(
response => {
console.log('请求成功了!',response.data)
},
error => {
console.log('请求失败了!',error.message)
}
)
},
getCars() {
axios.get('http://localhost:8080/demo/cars').then(
response => {
console.log('请求成功了!',response.data)
},
error => {
console.log('请求失败了!',error.message)
}
)
}
}
}
</script>
最终效果如下图: