$httpInterceptor not intercepting API calls

When using $httpInterceptor in AngularJS, it may fail to intercept API calls due to various reasons such as incorrect configuration, missing dependencies, or improper usage. This guide will explore why this happens and how to fix it.

---

1. What is $httpInterceptor in AngularJS?

An $httpInterceptor in AngularJS allows us to modify HTTP requests and responses globally before they reach the server or the application.

Use Cases of $httpInterceptor

• Adding authorization tokens to requests.
• Logging HTTP requests and responses.
• Handling errors globally.
• Modifying request headers.
• Transforming responses before passing them to controllers.

---

2. Why is $httpInterceptor Not Intercepting API Calls?

Some common reasons include:

1. Interceptor is not registered properly in the AngularJS module.
2. Incorrect syntax or missing dependencies in the $httpProvider configuration.
3. Interceptor is not added to the request pipeline ($httpProvider.interceptors.push()).
4. API call uses fetch() or another library that does not go through $http.
5. Incorrectly returning a request or response inside the interceptor.
6. Module dependencies are missing (ngResource, ngRoute, etc.).
7. Asynchronous behavior issues where the interceptor logic is not executed properly.
8. CORS restrictions that prevent the request from reaching the server.

---

3. Debugging and Fixing the Issue Step-by-Step

Step 1: Ensure $httpInterceptor is Properly Registered

The interceptor must be added to $httpProvider.interceptors in the config block.

Fix: Correctly Register the Interceptor

angular.module('myApp', [])
  .config(function($httpProvider) {
    $httpProvider.interceptors.push('MyHttpInterceptor');
  });

---

Step 2: Correctly Define the Interceptor Factory

Ensure the interceptor is returning the correct values.

Fix: Return the Proper Request and Response Objects

angular.module('myApp')
  .factory('MyHttpInterceptor', function($q) {
    return {
      request: function(config) {
        console.log('Intercepting request:', config);
        return config;  // Must return config
      },
      response: function(response) {
        console.log('Intercepting response:', response);
        return response;  // Must return response
      },
      responseError: function(rejection) {
        console.error('HTTP Error:', rejection);
        return $q.reject(rejection);  // Must return rejection
      }
    };
  });

Common Mistake: Not Returning config or response

Incorrect Code (Interceptor will not work)

request: function(config) {
  console.log('Intercepting request:', config);
}  // Missing `return config;`

Correct Code

request: function(config) {
  console.log('Intercepting request:', config);
  return config;
}

---

Step 3: Ensure $httpInterceptor is Applied to All API Calls

If some API calls are not intercepted, check if they are made using $http.

Fix: Ensure API calls use $http

$http.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

If API calls use fetch(), $httpInterceptor will not intercept them.

Using fetch() (Interceptor will not work)

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

Solution: Use $http instead of fetch()

$http.get('https://api.example.com/data')
  .then(response => console.log(response.data));

---

Step 4: Check the Order of Execution

Interceptors must be added in the config phase, before any HTTP requests are made.

Fix: Register Interceptor in .config()

angular.module('myApp', [])
  .config(function($httpProvider) {
    $httpProvider.interceptors.push('MyHttpInterceptor');
  });

Incorrect (Interceptor Defined After API Calls)

angular.module('myApp', [])
  .run(function($http) {  // API calls are made before the interceptor is registered
    $http.get('https://api.example.com/data');
  })
  .config(function($httpProvider) {
    $httpProvider.interceptors.push('MyHttpInterceptor');
  });

Correct: Register Before Running the App

angular.module('myApp', [])
  .config(function($httpProvider) {
    $httpProvider.interceptors.push('MyHttpInterceptor');
  })
  .run(function($http) {  // API calls happen after interceptor is registered
    $http.get('https://api.example.com/data');
  });

---

Step 5: Handle CORS Issues

If CORS is blocking requests, the response may not reach the interceptor.

Fix: Allow CORS on the API Server

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

---

Step 6: Debugging Interceptor Execution

Add logs inside each function to check if the interceptor is running.

angular.module('myApp')
  .factory('MyHttpInterceptor', function($q) {
    return {
      request: function(config) {
        console.log('Interceptor: Request', config);
        return config;
      },
      response: function(response) {
        console.log('Interceptor: Response', response);
        return response;
      },
      responseError: function(rejection) {
        console.error('Interceptor: HTTP Error', rejection);
        return $q.reject(rejection);
      }
    };
  });

Check the browser console (F12) to see if the logs appear.

---

4. Summary & Final Fixes

Common Fixes for $httpInterceptor Not Working

Issue	Solution
Interceptor not registered	Ensure config() block contains $httpProvider.interceptors.push('MyHttpInterceptor');
Not returning config or response	Always return config; and return response; inside the interceptor
Using fetch() instead of $http	Convert fetch() requests to $http
Order of execution is wrong	Define interceptors before making API calls
CORS blocking requests	Ensure Access-Control-Allow-Origin is set on the server
API calls not using $http	Ensure all HTTP calls use $http or $resource

By following these steps, your $httpInterceptor should start intercepting API calls correctly.