如何拦截Axios单次请求触发的子请求并捕获其请求头

Axios 本身不具备拦截关联子请求的能力，和你之前用的Puppeteer存在本质的运行逻辑差异：

• Puppeteer操控的是完整的浏览器内核，页面加载、渲染、JS执行全流程都在内核管控范围内，页面渲染过程中自动触发的所有静态资源请求、XHR/fetch接口请求都能被全局监听拦截。
• Axios本质是独立的HTTP客户端，不管运行在Node.js端还是浏览器端，它只会处理你主动调用axios()/axios.get()等方法发起的单个请求，既不会解析请求返回的HTML/JS内容，也不会自动执行页面里的JS逻辑，根本不会自动触发你说的链路内10个额外子请求，自然不存在拦截这类子请求的基础。

补充：即便Axios运行在浏览器环境中，它的拦截器也只能捕获通过Axios自身发起的请求，页面内其他脚本通过原生XHR、fetch、第三方HTTP库发起的请求，Axios完全无法感知。

如果你的目标是获取访问目标页面时所有子请求的请求头（比如你示例中提取Authorization头里的Token），可以选择以下两类方案：

方案1：复用现有Puppeteer能力（成本最低、稳定性最高） #

不需要强行替换成Axios实现拦截逻辑，直接在Puppeteer里拿到需要的请求头/Token后，再传给Axios发起后续业务请求即可，和你现有代码逻辑完全兼容：

const axios = require('axios');
let TOKEN = '';
const page = await browser.newPage();
await page.setRequestInterception(true);
page.on('request', async request => {
  const auth = request.headers().authorization;
  if (auth) {
    TOKEN = auth.substring(7); // 截掉Bearer 前缀，和原有逻辑一致
    await request.abort();
    // 拿到目标请求头后即可用Axios发起后续需要的请求
    const targetRes = await axios.get('你的业务接口地址', {
      headers: {
        Authorization: `Bearer ${TOKEN}`
      }
    });
  } else {
    await request.continue();
  }
});
await page.goto('www.example.com/welcome');

方案2：脱离浏览器环境手动模拟请求链路 #

如果你不想依赖Puppeteer的浏览器内核，可以手动梳理页面的请求触发逻辑，再配合Axios拦截器实现请求头捕获：

1. 先用Axios请求入口地址www.example.com/welcome
2. 解析返回的HTML内容，梳理页面JS触发子请求的顺序、参数规则
3. 按浏览器实际请求顺序，手动用Axios逐个发起子请求，通过Axios自带的请求拦截器统一捕获每个请求的请求头
   Axios请求拦截器的基础写法如下：

// 注册全局请求拦截器
axios.interceptors.request.use(config => {
  // 此处可拿到当前Axios发起的每一个请求的完整配置，包含请求头
  console.log('请求地址：', config.url, '请求头：', config.headers);
  return config;
}, error => Promise.reject(error));

注意这个方案的局限性：如果页面子请求存在JS混淆、动态加密参数、浏览器环境校验逻辑，手动模拟的成本会极高，稳定性远低于直接使用Puppeteer。

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