HTTP Interceptor vs Proxy Interceptor: Angular, Axios and Fetch Compared

Angular HttpInterceptor

Modern Angular uses functional interceptors registered with provideHttpClient.

1export const authInterceptor: HttpInterceptorFn = (req, next) => {
2  const token = inject(AuthService).token();
3  return next(token ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } }) : req);
4};
5
6// app.config.ts
7provideHttpClient(withInterceptors([authInterceptor]));

Axios interceptors

1api.interceptors.response.use(undefined, async (error) => {
2  const original = error.config;
3  if (error.response?.status === 401 && !original._retried) {
4    original._retried = true;
5    await refreshSession();
6    return api(original);
7  }
8  return Promise.reject(error);
9});

Fetch has no interceptor API

The Fetch API has no built-in hooks, so teams write a wrapper such as apiFetch() and use it everywhere. Wrapping window.fetch globally is possible, and it is exactly what browser interceptor tools do internally, but it is fragile in application code.

Where a proxy interceptor fits

Now suppose you need to see how the UI above behaves when the refresh endpoint returns 500, or when /me takes 8 seconds. You *could* add a mock interceptor, but then you have to commit, build and remember to remove it. A proxy interceptor makes the same change from outside the code, only in your browser, and your real interceptors still run so you are testing the true behaviour.

1{
2  "name": "Refresh endpoint fails",
3  "match": { "urlPattern": "*/auth/refresh", "matchType": "wildcard" },
4  "response": {
5    "body": { "enabled": true, "mode": "replace-whole", "statusCode": 500, "value": "{}" }
6  }
7}

Decision table

Frequently asked questions

Read next