title: How to submit data including the CSRF token from angularjs controller to REST controller?
body: <p>I'm trying to submit data from modal using from angular controller to REST controller. The <em>PUT,GET,POST</em> method work code work only when CSRF is <strong>disbaled</strong> but when i <strong>enable</strong> the CSRF the PUT and POST is not working. I check in the console log and it say's <strong>405 (Method Not Allowed)</strong>.</p>
  
  <p>I know i need to pass the data along with the <strong><em>csrf token</em></strong> but i can't figure out how to include it when passing data using angular controller. This is my first angular. Any suggestion is extremely appreciated. So here is my code.</p>
  
  <p>My configuration:</p>
  
  <pre><code>public class CORSFilter implements Filter {
  
      public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
          HttpServletResponse response = (HttpServletResponse) res;
          response.setHeader("Access-Control-Allow-Origin", "*");
          response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
          response.setHeader("Access-Control-Max-Age", "3600");
          response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");
          chain.doFilter(req, res);
      }
  
      public void init(FilterConfig filterConfig) {}
  
      public void destroy() {}
  
  }
  </code></pre>
  
  <p>My SecurityConfiguration.java</p>
  
  <pre><code>Configuration
  @EnableWebSecurity
  public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
  
      @Autowired
      @Qualifier("customUserDetailsService")
      UserDetailsService userDetailsService;
  
      @Autowired
      PersistentTokenRepository tokenRepository;
  
      @Autowired
      public void configureGlobalSecurity(AuthenticationManagerBuilder auth)
              throws Exception {
          auth.userDetailsService(userDetailsService);
          auth.authenticationProvider(authenticationProvider());
      }
  
      /* This method sets-up the list of accessing page for each role. */
      @Override
      protected void configure(HttpSecurity http) throws Exception {
          http.authorizeRequests()
                  // Request Mapping accessible
                  .antMatchers("/restUser/**") // -------&gt; HERE I INCLUDE THE REQUEST MAPPING
                  // Roles
                  .access("hasRole('ADMIN')").and().formLogin()
                  .loginPage("/login").loginProcessingUrl("/login")
                  .usernameParameter("usernameId").passwordParameter("password").and()
                  .rememberMe().rememberMeParameter("remember-me")
                  .tokenRepository(tokenRepository).tokenValiditySeconds(86400)
                  .and().csrf().and().exceptionHandling()
                  .accessDeniedPage("/Access_Denied");
  
          // Disable spring security
          // http.csrf().disable(); 
  
      }
  
      @Bean
      public PasswordEncoder passwordEncoder() {
          return new BCryptPasswordEncoder();
      }
  
      @Bean
      public DaoAuthenticationProvider authenticationProvider() {
          DaoAuthenticationProvider authenticationProvider = new DaoAuthenticationProvider();
          authenticationProvider.setUserDetailsService(userDetailsService);
          authenticationProvider.setPasswordEncoder(passwordEncoder());
          return authenticationProvider;
      }
  
      @Bean
      public PersistentTokenBasedRememberMeServices getPersistentTokenBasedRememberMeServices() {
          PersistentTokenBasedRememberMeServices tokenBasedservice = new PersistentTokenBasedRememberMeServices(
                  "remember-me", userDetailsService, tokenRepository);
          return tokenBasedservice;
      }
  
      @Bean
      public AuthenticationTrustResolver getAuthenticationTrustResolver() {
          return new AuthenticationTrustResolverImpl();
      }
  
  }
  </code></pre>
  
  <p>My RestController:</p>
  
  <pre><code>@RestController
  public class UserRestController {
  
      @Autowired
      UserService userService;
  
      // -------------------Retrieve All
      // Users--------------------------------------------------------
  
      @RequestMapping(value = "/restUser", method = RequestMethod.GET)
      public ResponseEntity&lt;List&lt;User&gt;&gt; listAllUsers() {
          List&lt;User&gt; users = userService.findAllUsers();
          if (users.isEmpty()) {
              return new ResponseEntity&lt;List&lt;User&gt;&gt;(HttpStatus.NO_CONTENT);
          }
          return new ResponseEntity&lt;List&lt;User&gt;&gt;(users, HttpStatus.OK);
  
      }
  
      // -------------------Create a
      // User--------------------------------------------------------
  
      @RequestMapping(value = "/restUser", method = RequestMethod.POST)
      public ResponseEntity&lt;Void&gt; createUser(@RequestBody User user,
              UriComponentsBuilder ucBuilder) {
          System.out.println("Creating User " + user.getUsernameId());
  
          // if (userService.isUserExist(user)) {
          // System.out.println("A User with name " + user.getUsername() +
          // " already exist");
          // return new ResponseEntity&lt;Void&gt;(HttpStatus.CONFLICT);
          // }
  
          userService.saveUser(user);
          System.out.println("Fetch Data: " + user);
          HttpHeaders headers = new HttpHeaders();
          headers.setLocation(ucBuilder.path("/restUser/{id}")
                  .buildAndExpand(user.getId()).toUri());
          return new ResponseEntity&lt;Void&gt;(headers, HttpStatus.CREATED);
      }
  
      // -------------------Retrieve Single
      // User--------------------------------------------------------
  
      @RequestMapping(value = "/restUser/{id}", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
      public ResponseEntity&lt;User&gt; getUser(@PathVariable("id") int id) {
          System.out.println("Fetching User with id " + id);
          User user = userService.findById(id);
          if (user == null) {
              System.out.println("User with id " + id + " not found");
              return new ResponseEntity&lt;User&gt;(HttpStatus.NOT_FOUND);
          }
  
          System.out.println("Fetch Data: " + user);
          return new ResponseEntity&lt;User&gt;(user, HttpStatus.OK);
      }
  
      // ------------------- Update a User
      // --------------------------------------------------------
  
      @RequestMapping(value = "/restUser/{id}", method = RequestMethod.PUT)
      public ResponseEntity&lt;User&gt; updateUser(@PathVariable("id") int id,
              @RequestBody User user) {
          System.out.println("Updating User " + id);
  
          User currentUser = userService.findById(id);
          //
          // if (currentUser==null) {
          // System.out.println("User with id " + id + " not found");
          // return new ResponseEntity&lt;User&gt;(HttpStatus.NOT_FOUND);
          // }
  
          // currentUser.setUsernameId(user.getUsernameId());
          // currentUser.setFirstName(user.getFirstName());
          // currentUser.setEmail(user.getEmail());
  
          System.out.println("USER: " + user);
          userService.updateUser(user);
          return new ResponseEntity&lt;User&gt;(currentUser, HttpStatus.OK);
      }
  
  }
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>'user strict';
  
  var App = angular.module('myApp', ['ngResource', 'ngAnimate', 'ui.bootstrap']);
  </code></pre>
  
  <p>user_service.js</p>
  
  <pre><code>'use strict';
  
  
  App.factory('User', ['$resource', function ($resource) {
      //$resource() function returns an object of resource class
      return $resource(
              'http://localhost:8080/MavenTry/restUser/:id', 
              {id: '@id'},//Handy for update &amp; delete. id will be set with id of instance
              {
                  update: {
                        method: 'PUT' // To send the HTTP Put request when calling this custom update method.
                  }
  
              }
      );
  }]);
  </code></pre>
  
  <p>user_controller.js</p>
  
  <pre><code>'use strict';
  
  App
          .controller(
                  'UserController',
                  [
                          '$scope',
                          'User',
                          '$uibModal',
                          '$log',
                          function($scope, User, $uibModal, $log) {
                              var self = this;
                              self.user = new User();
  
                              self.users = [];
  
                              //Fetch all user data
                              self.fetchAllUsers = function() {
                                  self.users = User.query();
                                  $log.info('self.users: ', self.users);
                              };
  
                              // Call function fetchAllUsers                          
                              self.fetchAllUsers();
  
  
                              $scope.open = function(id) {
  
                                  $log.info("parameter id: " + id);
                                  $scope.items = [];
  
                                  for (var i = 0; i &lt; self.users.length; i++) {
                                      if (self.users[i].id === id) {
                                          self.user = angular.copy(self.users[i]);
                                          $scope.items = angular
                                                  .copy(self.users[i]);
                                          break;
  
                                      }
                                  }
  
                                  var modalInstance = $uibModal.open({
                                      templateUrl : 'myModal1',
                                      controller : 'ModalInstance',
                                      size : 'lg',
                                      resolve : {
                                          items : function() {
                                              return $scope.items;
                                          }
                                      }
                                  });
                              };
  
                                  self.reset = function() {
                                  self.user = new User();
                                  $scope.myForm.$setPristine(); // reset Form
                              };
  
                          } ]);
  
  
  // Populate modal with data
  App.controller('ModalInstance', function($scope, $uibModalInstance, items,
          $log, User) {
  
      $scope.form = {};
      var myModal = this;
      myModal.user = new User();
  
      myModal.users = [];
  
      myModal.fetchAllUsers = function() {
          myModal.users = User.query();
      };
  
      // Populate DataTable using $GET
      myModal.fetchAllUsers = function() {
          myModal.users = User.query();
          };
  
      // Create user using $POST
      myModal.createUser = function() {
          myModal.user.$save(function() {
          myModal.fetchAllUsers();
          });
      };
  
      // Update $PUT
      myModal.updateUser = function() {
              myModal.user.$update(function() {
              myModal.fetchAllUsers();
          });
      };
  
  
      $scope.userInfo = items;
  
      $scope.submitForm = function() {
          if ($scope.form.userForm.$valid) {
              console.log('CSRF_TOKEN', csrftoken); // Here i retrieve the token from the view page. Dont know how to include this while submiting data
              myModal.user = $scope.userInfo;
  
              // Call function for PUT
              myModal.updateUser();
  
              $uibModalInstance.close('closed');
          } else {
              console.log('userform is not in scope');
          }
  
      };
  
      $scope.cancel = function() {
          $uibModalInstance.dismiss('cancel');
      };
  });
  
  
  //Retrieving CSRF_TOKEN
  var csrftoken = (function() {
      var metas = window.document.getElementsByTagName('meta');
  
      // finding one has csrf token
      for (var i = 0; i &lt; metas.length; i++) {
          if (metas[i].name === "csrf-token") {
              return metas[i].content;
          }
      }
  
  })();
  
  App.constant('CSRF_TOKEN', csrftoken);
  </code></pre>
  
  <p>In my view jsp i stored the csrf token in </p>
  
  <pre><code>&lt;meta name="csrf-token" content="${_csrf.token}"&gt;
  </code></pre>
  
  <p>My code here at angular controller is super newbie so anything suggestion is extremely appreciated :).</p>