广东网站建设科技,淘宝网页模板免费下载,wordpress会员vip购买扩展,网站建设 中企动力公司前言#xff1a;
在开发中#xff0c;有可能遇到每部分的功能的需要调用另一台服务器的地址。这个时候就需要设置不同的请求前缀首先代理到不同的服务器地址。 一、axios封装实例以及代理#xff1a;(不是完整的封装实例#xff0c;重点在于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 会覆盖实例中默认的 baseURLmethod: 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});
};
