title: angular2 spring boot cross-origin cors
body: <p>I got stuck with a cross origin cors issue with my project. I have to send a get request from my Angular2 app running on localhost:4200 to my Spring Boot backend running on localhost:8080 with some header attributes. the request i want to send looks like this:</p>
  
  <pre><code>test() {
    let jwt = localStorage.getItem('token');
    let headers = new Headers({
          'Content-Type': 'application/json; charset=utf-8',
          'Authorization': 'Bearer ' + jwt 
      });
  
      let options = new RequestOptions({ headers: headers });
      this.http.get('http://localhost:8080/service/events/byTeamId/1', options)
          .map((response: Response) =&gt; response.json())
          .subscribe(
              data =&gt; console.log('Response: '+data),
              err =&gt; console.log('error: '+err),
              () =&gt; console.log('Secret Quote Complete')
          );
  
  
  }
  </code></pre>
  
  <p>But this request doesn't arrive on the server side how i'd like to have it. With Postman to test the api it works.</p>
  
  <p>My Spring Boot Backend looks like this:</p>
  
  <p>WebSecurityConfig.java:</p>
  
  <pre><code>@Configuration
  @EnableWebSecurity
  @EnableGlobalMethodSecurity(securedEnabled = true)
  public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
  
      private RedirectStrategy redirectStrategy = new DefaultRedirectStrategy();
  
      @Autowired
  private SimpleCorsFilter simpleCorsFilter;
  
  @Resource
  private UserDetailsServiceImpl userDetailsService;
  
  @Resource
  private JwtAuthenticationProvider jwtAuthenticationProvider;
  
  @Override
  protected void configure(HttpSecurity http) throws Exception {
      http
              .authorizeRequests()
                  .antMatchers("/", "/home", "/login", "/register").permitAll()
                  .anyRequest().authenticated()
                  .and()
              .addFilterBefore(simpleCorsFilter, ChannelProcessingFilter.class)
              .addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class)
              .logout()
                  .permitAll()
              .and().csrf().disable();
  
  }...
  </code></pre>
  
  <p>My SimpleCorsFilter looks like this:</p>
  
  <pre><code>    @Component
  public class SimpleCorsFilter implements Filter {
  
      private final Logger log = LoggerFactory.getLogger(SimpleCorsFilter.class);
  
      public SimpleCorsFilter() {
          log.info("SimpleCORSFilter init");
      }
  
      @Override
      public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
  
          HttpServletRequest request = (HttpServletRequest) req;
          HttpServletResponse response = (HttpServletResponse) res;
          response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
          //response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
          response.setHeader("Access-Control-Allow-Credentials", "true");
          response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
          response.setHeader("Access-Control-Max-Age", "3600");
          response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me, Authorization");
  
          chain.doFilter(req, res);
      }
  
      @Override
      public void init(FilterConfig filterConfig) {
      }
  
      @Override
      public void destroy() {
      }
  
  }
  </code></pre>
  
  <p>Wit Postman it works properly:</p>
  
  <p><a href="https://i.stack.imgur.com/umzgp.png" rel="nofollow noreferrer">Postman Get Request</a></p>
  
  <p>But when I test it on my chrome browser I get:</p>
  
  <p><a href="https://i.stack.imgur.com/QYFcB.png" rel="nofollow noreferrer">Chrome Request</a></p>
  
  <p>So to me it looks like i don't receive the header properties like "Authorization" at my backend. I also see this by debugging the request in the spring boot backend. I just see "null" as header of this request.</p>
  
  <p>Does anyone have an idea why i don't get my request headers correct at the api endpoint?</p>
  
  <p>I already had a look here:</p>
  
  <p>restlet.com/blog/2016/09/27/how-to-fix-cors-problems/</p>
  
  <p>and looked into several similar issues posted on stackoverflow.</p>