axios请求多个服务器

在此之前, 请求的服务器需要后端设置可跨域

此文章中主要有三种方案:

const apis = {
	api1: 'http://aaa.com/',
	api2: 'http://bbb.com/'
}
1
2
3
4

(1) 把baseURL置空不设置, 定义一个新的axios

const service = axios.create({
  timeout: 300000, // 5分钟
})
1
2
3

把完整的url链接放入到请求中

export const get1 = (url: string, params = {}, token = true) => {
  let u = apis.api1 + url
  return service.get(u, { params }).then((res) => res.data)
};
export const get2 = (url: string, params = {}, token = true) => {
  let u = apis.api2 + url
  return service.get(u, { params }).then((res) => res.data)
};
1
2
3
4
5
6
7
8

(2)将接口自定义加头部, 如项目一的接口为/program1/api, 项目二的接口为/program2/api, 在request请求头上进行替换

service.interceptors.request.use((config) => {
  if (config.url.indexOf("/program1") >= 0) {
    config.headers = {};
    if (config.url.indexOf("/program1") >= 0) {
    	config.url = config.url.replace("/program1", apis.api1);
    }
  }
  return config;
});
1
2
3
4
5
6
7
8
9

又或者在请求接口方法上进行替换

export const get = (url: string, params = {}, token = true) => {
  let u = ''
  if(url.indexOf('/program1')) u.replace("/program1", apis.api1);
  return service.get(u, { params }).then((res) => res.data);
};
1
2
3
4
5
6

(3)和后端约定, 不同项目的接口, 请求的接口头部不同. 因为一般的都为’/api’, 可约定’/program1/api’、‘/program2/api’, 此时就可以不用区分请求接口方法(主要区分在代理使用)

代理代码:

proxy: {
  '/program1': {
    target: apis.api1,
    changeOrigin: true,//设置访问目标地址允许跨域
    rewrite: (p) =>{ return p.replace(/^\/program1/, '')}
  },
  '/program2': {
    target: apis.api2,
    changeOrigin: true,//设置访问目标地址允许跨域
    rewrite: (p) =>{ return p.replace(/^\/program2/, '')}
  },
}
1
2
3
4
5
6
7
8
9
10
11
12