What Is an HTTP Interceptor? Code Interceptors vs Traffic Interceptors
An HTTP interceptor is a hook that runs for every HTTP request or response so it can inspect or change it before it continues. The term covers two things: code-level interceptors inside an app (Angular HttpInterceptor, Axios interceptors, a wrapped fetch) and external interceptor tools (browser extensions and proxies) that change traffic without touching the code.
Also called: HTTP request interceptor, network request interceptor, API interceptor
Code-level HTTP interceptors
Most front-end HTTP libraries expose an interceptor chain. You register a function once, and it sees every call the app makes. Typical jobs are attaching an auth token, refreshing an expired session, adding a correlation ID, logging, and turning HTTP errors into user-friendly messages.
axios.interceptors.request.use((config) => { const token = localStorage.getItem('token'); if (token) config.headers.Authorization = `Bearer ${token}`; return config;});Angular uses HttpInterceptorFn (or the older class-based HttpInterceptor) registered with provideHttpClient(withInterceptors([...])). Plain fetch has no interceptor API, so teams wrap it in a small helper.
HTTP interceptor tools
An HTTP interceptor tool does the same job from outside the application. Because it is not in your source code, it is ideal for things you want only while debugging: mocking an endpoint, forcing an error, pointing production UI at a staging API, or removing a header to reproduce a bug.
ProxyCeptor is an HTTP interceptor tool for Chrome and for web-runtime devices such as Smart TVs. It wraps fetch, XMLHttpRequest and sendBeacon in the page and uses Chrome's declarativeNetRequest API for redirects, blocking and header changes.
Which one should you use?
| Need | Use a code interceptor | Use an interceptor tool |
|---|---|---|
| Attach auth tokens in production | Yes | No |
| Global error handling and retries | Yes | No |
| Mock an endpoint the backend has not built yet | Possible, but it pollutes the codebase | Yes, no commit needed |
| Reproduce a customer bug with a specific payload | Slow (edit, rebuild, deploy) | Yes, in seconds |
| Test 500, 429 and timeout handling | Awkward | Yes |
| Share the same mock with QA | Needs a build | Yes, via exported or cloud-synced rules |
Common pitfalls with code interceptors
- Order matters: interceptors run in registration order for requests and usually in reverse for responses.
- Infinite refresh loops: a 401 handler that calls a refresh endpoint must skip itself.
- Mocks leaking to production: a "temporary" mock interceptor behind a flag is one bad config away from shipping. Keeping mocks in an external tool avoids this.
Frequently asked questions
What is an interceptor in Angular?
An Angular HTTP interceptor is a function (HttpInterceptorFn) that receives every HttpClient request and a next handler. It can clone and modify the request, handle the response stream, or short-circuit it. It is registered through provideHttpClient(withInterceptors([...])).
Can I intercept HTTP requests without changing my code?
Yes. A browser-based HTTP interceptor such as the ProxyCeptor Chrome extension changes requests and responses at runtime, with no code change or redeploy. See how to intercept fetch, XHR and sendBeacon calls.
Does an HTTP interceptor work with HTTPS?
Code interceptors and in-page tools see requests before encryption, so HTTPS is not a problem. Network proxies need a trusted certificate to decrypt HTTPS.
Keep learning
Intercept your first request in under a minute
Create a free ProxyCeptor account to mock, delay, block and rewrite API traffic, then share the same rules with your team.