如何解决Axios请求时自动在URL查询参数前添加尾部斜杠的问题

问题特征 #

• 运行环境：Node.js 环境下运行独立 JS 脚本，使用 Axios 发起 HTTP 请求
• 预期请求地址：
  http://localhost:3000/api/competition/player-joined?userId=${accounts[i].dbId}&competitionId=a80flwvap1lbhef3d704
• 实际Axios发起的请求地址：
  http://localhost:3000/api/competition/player-joined/?userId=${accounts[i].dbId}&competitionId=a80flwvap1lbhef3d704
• 前置排查结论：传入Axios的原始URL字符串未携带player-joined后的尾部斜杠，常规字符串替换、公开配置项排查均未找到关闭自动加斜杠的入口。

根因说明 #

该问题不属于Axios的默认设计行为，90%以上的触发场景来自三类原因：

1. 0.21.0~0.24.0版本区间的Axios存在已知URL解析bug：当传入的url字符串自带查询参数，同时配置项中存在params字段（哪怕是空对象），路径解析逻辑会错误地在查询参数起始符?前插入尾部斜杠
2. 自定义Axios实例的baseURL与请求路径拼接规则不匹配，触发路径段解析异常
3. 第三方Axios封装库、全局请求拦截器默认注入了自动补尾斜杠的逻辑，且未提供关闭开关

修复方案（按命中概率排序） #

方案1：统一查询参数传参方式 #

不要在url字符串中直接拼接查询参数，所有查询参数统一通过Axios配置的params字段传递，同时删除全局默认的空params配置（如axios.defaults.params = {}）。
示例代码：

// 错误写法：url内拼接查询参数 + 额外传params配置（哪怕params是空对象也会触发bug）
const badRequest = await axios.get(
  `http://localhost:3000/api/competition/player-joined?userId=${accounts[i].dbId}`,
  { params: { competitionId: 'a80flwvap1lbhef3d704' } }
)

// 正确写法：url仅保留纯路径，所有查询参数放入params字段
const goodRequest = await axios.get(
  'http://localhost:3000/api/competition/player-joined',
  {
    params: {
      userId: accounts[i].dbId,
      competitionId: 'a80flwvap1lbhef3d704'
    }
  }
)

方案2：修正baseURL拼接规则 #

如果使用自定义Axios实例发起请求，统一baseURL和请求路径的拼接格式：

• baseURL 固定在末尾携带斜杠，例如 http://localhost:3000/api/competition/
• 请求路径不要在开头携带斜杠，例如 player-joined
• 查询参数依然统一放入params字段传递，不要拼接在路径字符串中

方案3：版本升级或拦截器修正 #

如果受项目依赖限制无法调整传参方式，优先将Axios升级到1.x以上稳定版本，该URL解析bug在1.0.0正式版本中已完成修复。
如果无法升级Axios版本，可以添加一个全局请求拦截器修正异常URL，该逻辑不会影响正常携带尾斜杠的接口请求，兼容性更强：

axios.interceptors.request.use(config => {
  // 仅修正 ? 前多余的斜杠，不改动路径本身的尾斜杠
  config.url = config.url.replace(/\/\?/, '?')
  return config
})

方案4：排查第三方注入逻辑 #

检查项目中是否引入了基于Axios二次封装的请求插件、全局挂载的自定义请求拦截器，这类工具部分默认开启了自动补全路径尾斜杠的逻辑，找到对应逻辑关闭即可。

内容的提问来源于stack exchange，提问作者Darkbound