axios请求多个服务器

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

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

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

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

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

把完整的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)
};

(2)和后端约定, 不同项目的接口, 请求的接口头部不同. 因为一般的都为’/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/, '')}
  },
}

你可能感兴趣的:(vue,vue3,服务器,javascript,vue)