如何配置axios让相对请求路径基于当前URL正确拼接？

云原生阿岚

2026-8-29

问题原因

路径拼接结果不符合预期，是浏览器原生相对URL解析规则导致的：
当前页面地址是localhost/admin/banner，末尾没有斜杠，浏览器会把最后一段的banner识别为文件名而非目录名，此时直接写不带前缀的相对路径modifyBannerData，会直接替换掉最后一段的内容，最终请求地址就变成了localhost/admin/modifyBannerData。
只有明确指定以当前路径所在目录为基准拼接，才能得到你预期的localhost/admin/banner/modifyBannerData。

解决方案

两种方案选其一即可：

单接口调整（成本最低，无副作用）
给请求路径前面加./前缀，明确表示相对当前目录拼接路径：
```
axios.post('./modifyBannerData', {
  // 原有请求参数不变
})
```
这种写法不受当前URL末尾是否带斜杠影响，始终能拼接出正确的目标地址。
全局配置axios（适合项目内所有接口都基于当前页面路径拼接的场景）
在axios初始化位置配置全局baseURL，自动处理路径末尾斜杠：
```
// 取当前页面路径，自动补全末尾斜杠
const currentBase = window.location.pathname.endsWith('/')
  ? window.location.pathname
  : window.location.pathname + '/'
axios.defaults.baseURL = currentBase
```
配置完成后原有请求代码不需要修改，写axios.post('modifyBannerData', {})就会自动拼接为目标地址。