vue專案中配置請求多個服務器解決方案
解決方案
- vue.config.js 配置
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修改
const BASE_URL = ''
// 創建 axios 實體
const service = axios.create({
baseURL: BASE_URL,
timeout: 5000 ,// 請求超時時間
headers: {
'Content-Type': contentType,
},
})
- 發送請求
// 請求前綴為"/"
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)
})
備注：多個介面服務的狀況下，如果前綴是”/”，要將其放在proxy配置的最初一部分，代理的時候是從上往下查找的，如果放在最下面其余服務也會被該配置代理掉
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/271390.html
標籤：其他
上一篇：2021-03-30