Diagnosing Axios Interceptor Issues: Requests That Never Reach the Server

Recognizable Condition

When using Axios, you notice that HTTP requests either never leave the browser (no network activity in DevTools) or the response data arrives corrupted or missing, while the console shows no obvious errors. This pattern often points to a problem in request or response interceptors.

Cause and Diagnostic Table

Possible Cause	What to Look For
Interceptor returns a promise that never resolves (or throws synchronously)	Request hangs; no network tab entry; no error caught in .catch
Interceptor mutates config and removes required properties (e.g., url, method)	Request URL appears as undefined or method defaults to GET incorrectly; DevTools shows a malformed request
Interceptor adds invalid headers or overwrites auth token	Server responds with 401/403; headers list shows missing Authorization or unexpected values
Interceptors registered in wrong order causing later ones to overwrite earlier modifications	Auth token added by an early interceptor disappears after a later interceptor runs
Custom Axios instance created with axios.create() but interceptors attached to the default axios instead	Requests using the custom instance behave as if no interceptors were applied (e.g., no baseURL, no headers)

Ordered Checks

1. Confirm interceptor execution – Add a console.log('request interceptor start') at the very start of each request interceptor and a matching log at the end. Do the same for response interceptors. Reload the page and trigger a request; verify the logs appear in the expected order.
2. Inspect the config after each interceptor – Inside each interceptor, log config (request) or response (response) before returning. Look for missing url, method, or unexpected header changes.
3. Check promise resolution – Ensure every interceptor returns either the config/response value or a Promise.reject. If you see a return statement without a value, the promise resolves to undefined and breaks the chain.
4. Validate instance usage – If you created a custom instance (const api = axios.create({ baseURL: '/api' })), verify that interceptors are attached to api and not to the global axios. Search your codebase for axios.interceptors vs api.interceptors.
5. Isolate the problematic interceptor – Temporarily comment out all interceptor registrations. Confirm the request works (you should see a network call). Then re‑add them one by one, repeating the request after each addition, until the issue reappears.

Fixes Tied to Findings

Interceptor hangs or throws synchronously

Replace any synchronous throw with a rejected promise:

// ❌ Bad
axios.interceptors.request.use(config => {
  if (!config.headers.Authorization) throw new Error('Missing token');
  return config;
});

// ✅ Good
axios.interceptors.request.use(config => {
  if (!config.headers.Authorization) {
    return Promise.reject(new Error('Missing token'));
  }
  return config;
});

Config mutated incorrectly

Clone the config before modifying it, or avoid deleting required fields:

axios.interceptors.request.use(config => {
  const newConfig = { ...config }; // shallow copy
  newConfig.headers['X-Request-ID'] = crypto.randomUUID();
  return newConfig;
});

Headers overwritten or auth lost

Ensure later interceptors only add, not replace, unless intended:

axios.interceptors.request.use(config => {
  // Preserve existing Authorization if present
  if (!config.headers.Authorization) {
    config.headers.Authorization = `Bearer ${getStoredToken()}`;
  }
  return config;
});

Wrong interceptor order

Register interceptors in the sequence you need them to execute. For example, auth token addition should happen before logging:

axios.interceptors.request.use(addAuthToken); // first
axios.interceptors.request.use(logRequest);   // second

Interceptors attached to wrong instance

Bind interceptors to the same instance you use for requests:

const api = axios.create({ baseURL: '/api' });
api.interceptors.request.use(attachAuth);
// Use api.get(...) elsewhere

Escalation Criteria

• After verifying interceptor logic, the request still fails with network errors that are not related to configuration (e.g., CORS, DNS).
• You observe memory leaks or increasing call stacks when interceptors are involved, suggesting recursive interceptor registration.
• The issue appears only in production builds after minification, indicating a possible side‑effect of a build step that alters interceptor code.
• You need to conditionally enable/disable interceptors per‑request (e.g., skip auth for public endpoints) and the current global registration does not support that pattern.

Practical Verification

After applying a fix, repeat the ordered checks. A successful outcome is:

• Request interceptor logs show start → end.
• Network tab displays a request with the correct URL, method, and headers.
• Response interceptor logs (if used) show the transformed data before it reaches your .then handler.
• The promise chain resolves or rejects as expected, and your application’s .then / .catch receives the correct value or error.

Limitations

This guide covers common interceptor‑related problems in browser‑based Axios usage. It does not address:

• Node.js‑specific request handling (e.g., http agent configuration).
• Issues stemming from Axios version mismatches (behavior changed between 0.x and 1.x).
• Problems caused by third‑party plugins that wrap Axios interceptors.

Always consult the Axios changelog for the version you are using (axios --version or package.json) when applying fixes.