使用vue3 + axios
1.背景
在项目上线过程中：包只能上到监理环境，生产环境的包直接拿监理的包去用
- 监理环境的地址是abc.com.cn:80
- 生产环境的地址是def.com.cn:80
那么由于服务器ip不同，请求的后端路径也不同，那么怎么在前端的axios中配置动态的后端请求路径呢？
2.思路
首先想到的就是后端提供一个接口给我们，让我们知道应该请求的路径是什么，但是如果有这么一个接口，也需要知道这个接口的路径，这个接口如果我们自己后端提供，明显陷入一个循环了，无法实现；如果有一个第三方的服务可以提供这个路径（比如公共的注册中心），那么我们先试监理的后端地址请求，请求失败再试生产的后端地址；但是很可惜，目前没有这样的注册中心。 那么只能想想别的办法，观察请求的后端url发现，服务器的地址和请求的url相同，那么我们就可以将请求的url在浏览器中获取到，然后拿来去请求后端的url。 axios的配置代码：
// 配置新建一个 axios 实例
const service: AxiosInstance = axios.create({
baseURL: window.location.origin,
timeout: 50000,
headers: { 'Content-Type': 'application/json;charset=utf-8' },
paramsSerializer: {
serialize(params) {
return qs.stringify(params, { allowDots: true });
},
},
withCredentials: true,
});
最重要的就是window.location.origin获取浏览器的请求源了
