四种axios中引入多个baseURL的解决方案_axios 多个baseurl

方案1 使用请求拦截器（推荐）

适用场景：产品后期迭代新引入后端模块，base地址不同。
栗子：
setp1：明确vue环境变量中的baseURL地址

NODE_ENV = production
VUE_APP_BASE_URL = /app/api
VUE_APP_URL_TWO= /two
VUE_APP_URL_THREE= /three
1
2
3
4

step2：修改axios请求拦截

// 创建 Axios 实例
const axiosInstance: Instance = axios.create({
    timeout: 15000,
    baseURL: process.env.VUE_APP_BASE_URL
});
// 请求拦截器
axiosInstance.interceptors.request.use((config) => {
    if(config.requestBase=='VUE_APP_BASE_URL'){
        config.headers['Content-Type']="application/x-www-form-urlencoded"; 

    }else if(config.requestBase=='VUE_APP_URL_TWO'){
        config.headers['Content-Type']="application/json";
        config.baseURL=process.env.VUE_APP_URL_TWO; // 取到环境变量：baseURL
        config.data=JSON.stringify(config.data);  

    }else if(config.requestBase=='VUE_APP_URL_THREE'){
        config.baseURL=process.env.VUE_APP_URL_THREE;
    }
    return config;
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

step3: 发起请求时 按需传递requestBase的配置即可，可参考

const {data, code} = await request.get<{time: number}>(ROOT_SYSTEM_TIME_URL, 
{}, // 携带的参数
{ requestBase:'VUE_APP_URL_THREE'} // 携带的配置
);
1
2
3
4

方案2 使用多个axios实例（不推荐）

适用场景：产品后期迭代新引入后端模块，base地址不同。
弊端：代码冗余大。

// 创建 Axios 实例 1
const axiosInstance1: Instance = axios.create({
    timeout: 15000,
    baseURL: process.env.VUE_APP_BASE_URL_ONE
});

// 创建 Axios 实例 2
const axiosInstance2: Instance = axios.create({
    timeout: 15000,
    baseURL: process.env.VUE_APP_BASE_URL_TWO
});

// 创建 Axios 实例 3
const axiosInstance3: Instance = axios.create({
    timeout: 15000,
    baseURL: process.env.VUE_APP_BASE_URL_THREE
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

方案3 不使用baseURL

适用场景：产品开发前期，不明确多少个base地址。

export const SYSTEM_TIME_URL = '/app/api/system/time'; // 地址写全即可
1

方案4 使用对象键值对指代base地址

适用场景：产品开发前期，明确了多个base。若处于项目后期，则不推荐。

export const requestBase = {
	base_url_one: '/one/xxx',
	base_url_two: '/two/xxx',
}
1
2
3
4

import requestBase from 'xxx';
export const SYSTEM_TIME_URL = `${requestBase.base_url_one}/app/api/system/time`; // 地址写全即可
1
2