如何在Axios拦截器中获取带参数占位符的原始URL？

首先明确：Axios作为HTTP请求库，本身不会保存请求的原始路由占位符模板——因为它发送的是替换占位符后的实际路径（比如/2/boo），所以默认在拦截器或请求对象里拿不到/:id/:q这类模板字符串。解决思路是主动在请求时关联模板与实际请求，以下是具体实现方案：

方案1：手动在请求配置中存入原始模板 #

发起请求时，将带占位符的URL模板直接附加到Axios的config参数中，后续在拦截器里直接读取该字段：

// 发起请求时传入原始模板
axios.get('/2/boo', {
  // 其他配置
  originalUrlTemplate: '/:id/:q'
});

// 在请求拦截器中获取模板
axios.interceptors.request.use(config => {
  console.log('原始带占位符的URL:', config.originalUrlTemplate); // 输出/:id/:q
  return config;
});

方案2：封装Axios实例，自动处理模板与路径替换 #

如果需要频繁使用带占位符的请求，可以封装一个Axios实例，统一处理模板替换和模板存储，避免重复手动传入：

// 创建自定义Axios实例
const customAxios = axios.create();

// 封装带模板的GET请求方法
customAxios.getWithTemplate = (template, params = {}, config = {}) => {
  // 替换模板中的占位符为实际参数值
  const actualUrl = template.replace(/:(\w+)/g, (match, key) => {
    return params[key] || match; // 参数不存在时保留占位符（可选）
  });
  // 将原始模板存入配置
  config.originalUrlTemplate = template;
  // 发起实际请求
  return customAxios.get(actualUrl, config);
};

// 使用示例
customAxios.getWithTemplate('/:id/:q', { id: 2, q: 'boo' })
  .then(response => {
    // 处理响应
  });

// 在拦截器中读取模板
customAxios.interceptors.request.use(config => {
  console.log('原始模板:', config.originalUrlTemplate); // 输出/:id/:q
  return config;
});

补充：后端中间件场景的特殊处理 #

如果你的“拦截所有请求的中间件”是运行在后端（比如Node.js的Express/Koa框架中），此时Axios转发的是实际路径，但后端路由框架本身会记录匹配到的原始路由模板：

• Express：可以通过req.route.path获取匹配的原始带占位符的路由（比如/:id/:q）
• Koa（搭配koa-router）：可以通过ctx._matchedRoute获取原始路由模板

此时无需在Axios中额外处理，直接从后端框架的请求对象中读取即可。

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