Axios拦截器是否可以同时拦截fetch发起的请求？

结论 #

你写的Axios请求拦截器仅能拦截Axios发起的请求，完全无法拦截原生fetch()发起的请求。

原因说明 #

• Axios的拦截器是Axios库内部封装的专属钩子逻辑，仅作用于通过Axios实例调用的请求流程，和浏览器原生的fetch API属于完全独立的两套运行体系，二者没有任何关联。
• 原生fetch没有内置的拦截器机制，如果你需要全局拦截fetch请求、统一添加自定义头，可以通过重写全局fetch方法实现，参考代码如下：

// 保存原始fetch方法
const originalFetch = window.fetch;
// 重写全局fetch
window.fetch = function(input, init = {}) {
  // 合并自定义请求头
  init.headers = {
    ...init.headers,
    someCustomHeader: 'XYZ'
  };
  // 调用原始fetch发起请求
  return originalFetch.call(this, input, init);
};

• 如果你需要同时统一拦截Axios和fetch两类请求，需要同时配置Axios拦截器、重写原生fetch方法，二者缺一不可。

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