title: Problems with Angular, CORS and Spring
body: <p>I have a simple project based on @RestController and AngularJS.
  I can send GET requests from Angular to @RestController but i could not send POST request. I have an error in browser console:</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="http://localhost:8080/add" rel="nofollow">http://localhost:8080/add</a>. Request header field Content-Type is not allowed by Access-Control-Allow-Headers.</p>
  </blockquote>
  
  <p>My @RestController:</p>
  
  <pre><code>@RestController
  public class AngularController {
      //@Autowired
    //  PhraseService phraseService;
      Logger logger = LoggerFactory.getLogger(this.getClass());
      @RequestMapping(value = "/add", method = RequestMethod.POST)
      public void add(@RequestBody String str){
          logger.info("Added");
          logger.info(str);
  
      }
  
      @RequestMapping("/")
      public void angularController(){;
          logger.info("Request!");
      }
  }
  </code></pre>
  
  <p>Here is my CORS filter:</p>
  
  <pre><code>@Component
  public class SimpleCORSFilter 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, OPTIONS, DELETE");
          response.setHeader("Access-Control-Max-Age", "3600");
          response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
          response.setHeader("Content-Type", "application/json");
          chain.doFilter(req, res);
      }
  
      public void init(FilterConfig filterConfig) {}
  
      public void destroy() {}
  
  }
  </code></pre>
  
  <p>My AngularJS controller:</p>
  
  <pre><code>function addController($scope, $http){
      $scope.url = 'http://localhost:8080/add';
      $scope.addPhrase = function(){
          $http.post($scope.url, {"data": $scope.value});
      }
  }
  </code></pre>
  
  <p>And index.html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app&gt;
  &lt;head&gt;
      &lt;title&gt;Hello AngularJS&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="server.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div ng-controller="addController"&gt;
      &lt;form&gt;
      &lt;input type="text" np-model="value"/&gt;
          &lt;button type="button" ng-click="addPhrase()"&gt;Send!&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I tried to solve this problem with header: "Content-Type": "application/json" but it gave me Bad request error.</p>