title: AngularJS & Spring Security with ROLE_ANONYMOUS still returns 401
body: <p>We are building an Angular Material application, consuming a RESTful Spring MVC API, with Spring Security &amp; OAUTH2. </p>
  
  <p>For testing purpose, we gave ROLE_ANONYMOUS access to our /users endpoint:</p>
  
  <pre><code>&lt;intercept-url pattern="/users" method="POST" access="ROLE_ANONYMOUS"/&gt;
  </code></pre>
  
  <p>But when we try to send a JSON by POST, we still get a 401 response from the server. </p>
  
  <ul>
  <li>This is not happening with non-angular clients like Postman. </li>
  <li>If we disable the Spring Security filter, everything works fine. </li>
  <li>GET requests to the same endpoint also work fine. </li>
  </ul>
  
  <p>This is our app.config:</p>
  
  <pre><code>  angular.module('App')
      .constant('RESOURCES', (function () {
                  var resource = 'http://localhost:8080';
                  return {
                    USERS: resource + '/users'
                  }
                })());
  </code></pre>
  
  <p>And the factory doing the POST method:</p>
  
  <pre><code>  app.factory('LoginUser', ['RESOURCES', '$resource', function (RESOURCES, $resource) {
      return $resource(RESOURCES.USERS, null, {
                         add: {method: 'POST'}
                       });
    }]);
  </code></pre>
  
  <p>And the signup method in the controller:</p>
  
  <pre><code>  function signup(user) {
      LoginUser.add({}, JSON.stringify(user));
    }
  </code></pre>
  
  <p>We have the SimpleCORSFilter setup in the server following the <a href="https://spring.io/guides/gs/rest-service-cors/" rel="nofollow noreferrer">Spring guide</a>.</p>
  
  <p>You can see the comparison between the postman POST and the AngularJS POST here:</p>
  
  <p><img src="https://i.imgur.com/XFxIYzS.png" alt="screenshot"></p>
  
  <p>The header marked in red is a custom one we have to add in Postman in order to avoid a 415 unsupported media type.</p>
  
  <p>We tried to put custom headers in the POST request in AngularJS, but it doesn't seem to be working:</p>
  
  <pre><code>.config(function ($httpProvider) {
      $httpProvider.defaults.headers.put['Content-Type'] = $httpProvider.defaults.headers.post['Content-Type'] =
          'application/json; charset=UTF-8';
  });
  </code></pre>