1. 前言
- 可能我們經(jīng)常有場(chǎng)景 配置多個(gè)代理,但是在具體發(fā)起請(qǐng)求的時(shí)候 就不知道怎么發(fā)了,因?yàn)?
axios中的baseurl只能配置一個(gè),
- 之前有文章vue-axios配置寫過解決方案,但不是重點(diǎn)
- 所以單獨(dú)在寫篇文章
config.js文件配置多個(gè)代理,axios如何發(fā)起請(qǐng)求,如何配置baseurl
2. 代理配置
config.js
devServer:{
open:true,
host:"127.0.0.1",
// host:"yzs.com",//host文件配置域名
proxy:{
"/dyapi":{
target:"http://xx.x.cn/api/RoomApi",
ws:true,
ChangeOrigin:true,
pathRewrite:{
"^/dyapi":""
}
},
'/elmapi':{
// 不一定非得寫域名/一般是寫 所有接口前面 都一樣的 部分/url
target:'https://xx.xx.org',
ws:true,
changeOrigin:true,
pathRewrite:{
'^/elmapi':''
}
}
}
}
- 配置多個(gè)代理
3. axios 二次封裝
-
http.js文件
//************2. 創(chuàng)建實(shí)例 */
const instance = axios.create({
baseURL: "/dyapi",
// timeout: 1000,
// headers: {'X-Custom-Header': 'foobar'}
});
- 只配置了 一個(gè)常用的
baseurl
4. 頁面使用 dyapi代理的使用
import request from '@/src/api/http.js';
export const getLiveList = (params = {offset:0,limit:10})=>{
return request.get("/live",{
params
})
}
- 就是直接 使用
- 因?yàn)?二次封裝
http.js里面 已經(jīng)設(shè)置了baseURL: "/dyapi",
- 實(shí)際請(qǐng)求效果: ``http://127.0.0.1:8081/dyapi/live?offset=0&limit=10`
5. 頁面使用 elmapi代理
5.1 通用方式
- 核心代碼
import request from '@/src/api/http.js';
export const postLiveList = (params ={name:"玩被"})=>{
return request({
url:"/v1/captchas",// 接口地址
method:"POST" // 請(qǐng)求方式
baseURL:'/elmapi',// baseurl
data:params,// post請(qǐng)求參數(shù)
})
}
- 直接通用配置 的
baseURL:'/elmapi',
- 這個(gè)優(yōu)先級(jí)會(huì)高于 二次封裝
http.js里面的baseURL
- 實(shí)際請(qǐng)求效果:
http://127.0.0.1:8081/elmapi/v1/captchas
5.2 實(shí)例使用
- 核心代碼
import request from '@/src/api/http.js';
export const postLiveList = (params ={name:"玩吧"})=>{
return request.post("/v1/captchas",params,{
baseURL:'/elmapi',
})
}
- 具體的
post 實(shí)例 使用'
- 注意參數(shù)的配置
6. 后記
- 有些文章需要 專一一個(gè)知識(shí)點(diǎn)
- 有些需要體系的總結(jié)
參考資料
vue-axios配置
axios中文--文檔
初心
我所有的文章都只是基于入門错蝴，初步的了解扼睬；是自己的知識(shí)體系梳理,如有錯(cuò)誤,道友們一起溝通交流;
如果能幫助到有緣人,非常的榮幸,一切為了部落的崛起;
共勉
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
