帮助文档
专业提供香港服务器、香港云服务器、香港高防服务器租用、香港云主机、台湾服务器、美国服务器、美国云服务器vps租用、韩国高防服务器租用、新加坡服务器、日本服务器租用 一站式全球网络解决方案提供商!专业运营维护IDC数据中心,提供高质量的服务器托管,服务器机房租用,服务器机柜租用,IDC机房机柜租用等服务,稳定、安全、高性能的云端计算服务,实时满足您的多样性业务需求。 香港大带宽稳定可靠,高级工程师提供基于服务器硬件、操作系统、网络、应用环境、安全的免费技术支持。
服务器资讯 / 香港服务器租用 / 香港VPS租用 / 香港云服务器 / 美国服务器租用 / 台湾服务器租用 / 日本服务器租用 / 官方公告 / 帮助文档
axios 多个baseURL配置、实现不同前缀代理到不同的服务器的几种方式
发布时间:2024-03-10 15:16:49   分类:帮助文档
axios 多个baseURL配置、实现不同前缀代理到不同的服务器的几种方式

前言:
在开发中,有可能遇到每部分的功能的需要调用另一台服务器的地址。这个时候就需要设置不同的请求前缀首先代理到不同的服务器地址。

一、axios封装实例以及代理:(不是完整的封装实例,重点在于baseURL的区别)
文件路径:/CMDB/src/utils/request.js
import axios from 'axios';


const defaultConfig = {
timeout: 5 * 1000,
baseURL:'/api' // 注意!! 这里是全局统一加上了 '/api' 前缀,也就是说所有接口都会加上'/api'前缀在,页面里面写接口的时候就不要加 '/api'了,否则会出现2个'/api',类似 '/api/api/user'这样的报错,切记!!
};

const instance = axios.create(Object.assign({}, defaultConfig));

instance.interceptors.request.use(
function (config) {
...
return config;
},
function (error) {
return Promise.reject(error);
}
);
instance.interceptors.response.use(
function (response) {
...
},
function (error) {
...
return Promise.reject(error);
}
);
export default instance;

代理的时候有两个前缀,根据前缀代理到不同的服务器 (我这里是vite的配置)
server: {
host: '0.0.0.0',
//tip: when change this, you may need to change src/config either.
proxy: {
'/api': {
// http://192.168.31.53:5173/
target: 'http://192.168.31.199:18777/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
},
'/app': {
target: 'http://125.124.5.117:12877/',
changeOrigin: true
}
}
}


二、第一种:请求的时候传入参数覆盖默认的baseUrl
import request from '@/src/utils/request.js'

// 获取IP列表 (这个会默认用前缀 '/api')
export const getList = data => {
return request({
url: '/ipv6/list',
method: 'post',
data
});
};


// 获取IP列表 (手动加另一个前缀 '/app')
export const getList = data => {
return request({
url: '/ipNetin/list',
baseURL: '/app', // 这个 baseURL 会覆盖实例中默认的 baseURL
method: 'post',
data
});
};

三、第二种:新封装一个axios实例
文件路径:/CMDB/src/utils/preAppRequest.js
import axios from 'axios';


const defaultConfig = {
timeout: 5 * 1000,
baseURL:'/app'
};

const instance = axios.create(Object.assign({}, defaultConfig));

instance.interceptors.request.use(
function (config) {
...
return config;
},
function (error) {
return Promise.reject(error);
}
);
instance.interceptors.response.use(
function (response) {
...
},
function (error) {
...
return Promise.reject(error);
}
);
export default instance;


需要请求到前缀 /api 的服务器的时候 就引入 request 实例
需要请求到前缀 /app 的服务器的时候 就引入 preAppRequest 实例 如:
import request from '@/src/utils/preAppRequest.js'

// 获取待办列表
export const getList = data => {
return request({
url: '/app/vlanNetin/list',
method: 'post',
data
});
};





香港云服务器租用推荐
服务器租用资讯
·广东云服务有限公司怎么样
·广东云服务器怎么样
·广东锐讯网络有限公司怎么样
·广东佛山的蜗牛怎么那么大
·广东单位电话主机号怎么填写
·管家婆 花生壳怎么用
·官网域名过期要怎么办
·官网邮箱一般怎么命名
·官网网站被篡改怎么办
服务器租用推荐
·美国服务器租用
·台湾服务器租用
·香港云服务器租用
·香港裸金属服务器
·香港高防服务器租用
·香港服务器租用特价