title: Angular 2 Access-Control-Allow-Headers
body: <p>I tried to connect to Spring rest login method with Angular 2</p>
  
  <p>Angular 2 request :</p>
  
  <pre class="lang-js prettyprint-override"><code>    let body = JSON.stringify({ "email":"email", "password":"password" });
      this.http.post('http://localhost:9999/login/authent', body, {headers:this.getHeaders()})
    .subscribe(
      response =&gt; {
      debugger;
        localStorage.setItem('id_token', response.json().id_token);
        this.router.navigate(['home']);
      },
      error =&gt; {
        alert(error.text());
        console.log(error.text());
      }
    );
  
  
   getHeaders() {
     // let username = this.variables.getUsername();
     // let password = this.variables.getPassword();
      let username = "username";
      let password = "password";
      let headers =  new Headers();
      //headers.append("Content-Type", "text/xml");
      headers.append("Access-Control-Allow-Origin", "*");
      headers.append("Access-Control-Allow-Credentials", "true"); 
      headers.append("Authorization", "Basic " + btoa(username + ":" + password));
      headers.append("Access-Control-Allow-Methods", "GET, HEAD, OPTIONS, POST, PUT, DELETE");
      headers.append("Content-Type", "application/json,application/x-www-form-urlencoded");
      headers.append("Access-Control-Request-Headers", "Content-type,X-Requested-With,Origin,accept");
      let options = new RequestOptions({headers: headers});
      console.log(JSON.stringify(options));
      return options;
  }
  </code></pre>
  
  <p>Spring filter : </p>
  
  <pre class="lang-java prettyprint-override"><code> @Component
   public class WebConfig  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-Credentials", "true");
              response.setHeader("Access-Control-Allow-Headers", "application/json,application/x-www-form-urlencoded");
              chain.doFilter(req, res);
          }
  
          public void init(FilterConfig filterConfig) {}
  
          public void destroy() {}
  </code></pre>
  
  <p>The request response is 200 and i have console error : </p>
  
  <p>XMLHttpRequest cannot load <a href="http://localhost:9999/login/authent" rel="nofollow noreferrer">http://localhost:9999/login/authent</a>. Request header field body is not allowed by Access-Control-Allow-Headers in preflight response.</p>