Angular：HTTP拦截器没有被注入配置块

Question

I have created a simple http interceptor with which I intend to log the requests and responses made. Issue is that it is undefined in config block which gets executed first and throws error because of which module couldn't get instantiated. Below is the code used :

authApp
.factory("httpInterceptor",function($log){
    var httpInterceptor = {};

    httpInterceptor.request = function(config){
        $log.info("request is being made to " + config.url);
        return config;
    };

    httpInterceptor.response = function(config){
        $log.info("request to URL : " + config.url + " is completed 
        now.");
        return config;
    };

    return httpInterceptor;
})
.config(function($httpProvider){
    // Http Interceptor
    $httpProvider.interceptors.push(httpInterceptor);
 });

Thanks in advance !!

Answer 1

Your code seems correct, except a particular line where you are pushing your brand new interceptor to the list of $httpProvider 's interceptors.

$httpProvider.interceptors.push(httpInterceptor);

This line doesn't know what httpInterceptor is because it is defined as an angular factory. Change it to

$httpProvider.interceptors.push('httpInterceptor'); // Note the quotes around it.

and retry.