Configure multiple server solutions in the vue project
solution
- Vue.config.js configuration
devServer: {
port: 3000,
proxy: {
// 第一台服务器配置
'/cgi': {
target: 'http://localhost:8005',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/cgi': '/cgi'
}
},
// 第二台服务器配置
'/': {
target: 'http://localhost:8006',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/': '/'
}
}
}
}
- axios modification
const BASE_URL = ''
// 创建 axios 实例
const service = axios.create({
baseURL: BASE_URL,
timeout: 5000 ,// 请求超时时间
headers: {
'Content-Type': contentType,
},
})
- send request
// 请求前缀为"/"
axios.get("/get_pkg_info").then(res => {
console.log('/', res)
}).catch(err => {
console.log(err)
})
// 请求前缀为"/cgi"
axios.get("/cgi").then(res => {
console.log('/cgi', res)
}).catch(err => {
console.log(err)
})
Note: In the case of multiple interface services, if the prefix is "/", it should be placed in the first part of the proxy configuration. When proxying, it will be searched from top to bottom. If it is placed at the bottom, the rest of the services will also be used. Configure proxy off