Setting JWT Authorization Header in Interceptor not working

Question

here the interceptor. The token looks good to me but the header is still empty when i review the request header in chrome debugger.

function httpInterceptor($q, $rootScope, $location, $localStorage) {
    return {
        'request': function(config) {
            if ($localStorage.authToken) {
                config.headers.Authorization = 'Bearer ' + $localStorage.authToken; // SET HEADER HERE!!!
            }
            console.debug('intercepting request to url: ' + config.url);
            return config;
        },
        'response': function(response) {
            console.debug('intercepting response');
            return response;
        },
        'responseError': function(response) {
            console.debug('intercepting response error');
            if (response.status === 401 && $location.path().indexOf('login') == -1) {
                console.debug('authentification required redirecting to login page.');
                response.data = '';
                if ($location.path().indexOf('login') == -1) {
                    $rootScope.preLoginUrl = $location.path();
                }
                $location.path('/login');
                return {};
            } else {
                console.debug(response.config.method + ' on ' + response.config.url + ' failed with status ' + response.status);
            }
            return $q.reject(response);
        }
    };
}

angular.module('hop').service('httpInterceptor', httpInterceptor);

I cant figure out what the heck is the problem...maybe i am blind :-)

have you added it to the interceptors array (thus registering it)? — AranS, Aug 02 '16 at 13:38
You set a breakpoint in the authorization header and you see `Bearer + yourToken`? — AranS, Aug 02 '16 at 13:45
Yes i can see this. But once the request goes out the header is not set (reviewing the request in chrome network tab) — Ugur Teker, Aug 02 '16 at 13:52
i just saw that the request that i am doing is set to http request method: OPTIONS. according to this post (http://stackoverflow.com/questions/12111936/angularjs-performs-an-options-http-request-for-a-cross-origin-resource) the reason for this is that the requests destination is a different domain. The server i am requesting to is CORS-enabled. So before sending the "real" GET request the browser somehow tries to request via OPTIONS method first. i guess this will be done by the browser itself and therefore no header will be set at that time. — Ugur Teker, Aug 02 '16 at 15:26

score 0 · Accepted Answer · answered Aug 02 '16 at 16:06

OK here the solution...

Like writting in my last comment the reason for all is the setup and the nature of browsers dealing with it. In my case the UI app runs on a different server/domain as the backend rest services. Whenever the UI now tries to request a resource via REST the browser implicitly does a pre-call with request method "OPTIONS". For non secured endpoints this is not an issue. But whenever the endpoint expects a authentification header set in order to authorize the clients request then this will fail since the browser generated request is out of application scope and no header is set. To bypass this you simply need to catch OPTIONS typed requests on the server side and give an "OK" back to the cient.

In my case i did this in the same class where i also enabled CORS - just enhanced my servlet filter in the app:

  import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CORSFilter implements Filter {
    private static final String OPTIONS = "OPTIONS";

    public void destroy() {
    }

    public static String VALID_METHODS = "DELETE, HEAD, GET, OPTIONS, POST, PUT";

    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws ServletException, IOException {
        HttpServletRequest httpRequest = (HttpServletRequest) request;
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpResponse.setHeader("Access-Control-Allow-Origin", "*");
        httpResponse.setHeader("Access-Control-Allow-Methods", VALID_METHODS);
        httpResponse.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, Authorization");
        httpResponse.setHeader("Access-Control-Max-Age", "3600");

        if (OPTIONS.equals(httpRequest.getMethod())) {
            httpResponse.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(request, response);
        }
    }

    public void init(FilterConfig config) throws ServletException {
    }

}

Setting JWT Authorization Header in Interceptor not working

1 Answers1