Keycloak angular app file uploading not sending token

Question

This is my angular configuration for appending keycloak token with every HTTP request.

module.factory('authInterceptor', function($q, Auth) {
    return {
        request: function (config) {
            var deferred = $q.defer();
            if (Auth.authz.token) {
                Auth.authz.updateToken(5).success(function() {
                    config.headers = config.headers || {};
                    config.headers.Authorization = 'Bearer ' + Auth.authz.token;
                    deferred.resolve(config);
                }).error(function() {
                        deferred.reject('Failed to refresh token');
                    });
            }
            return deferred.promise;
        }
    };
});
module.config(["$httpProvider", function ($httpProvider)  {
    $httpProvider.interceptors.push('authInterceptor');
}]);

This is the request I sending to the backend. It seems the request not adding keycloak token, so I'm getting 403 forbidden error.

var formData = new FormData(file);
formData.append('file', file);
return $http({
  method: 'POST',
  url: API_BASE + '/uploadEmployeeDetails/excelUpload',
  headers: {
    'Content-Type': undefined
  },
  data: formData,
  transformRequest: function(data, headersGetterFunction) {
    return data;
  }
});

Backend security config

Answer 1

Since you are able to send the token to the back-end as you can see from the network tab of the browser.

The issue is in the api side on handling the csrf token

If the csrf token is enabled by default you should disable it.

Here is the code with your help, to disable it

http.csrf().disable(); 
http.addFilterBefore(new CORSFilter(), ChannelProcessingFilter.class) 
.authorizeRequests().antMatchers("/**") 
.hasAnyRole("ORG_ADMIN", "EMPLOYEE", "PARENT", "STUDENT") 
.anyRequest().permitAll();