Angular 和 Spring Boot - POST 请求成为 OPTIONS

Question

I'm developing my API using Spring boot (and Spring Security) and the front with Angular.

Thee TypeScript code :

return this.http.post<any>('http://localhost:8080/users',
        {
            firstName: 'Clemi',
            lastName: 'Le boss',
            mail: 'clemclem'
        });

My controller :

@RestController
@RequestMapping(path = "/users")
public class UserController
{
    @Autowired
    private UserService userService;
...
    @PostMapping()
    public ResponseEntity<Object> addUser(Principal principal, @RequestBody User user) {
        User savedUser = userService.save(user);

        return new ResponseEntity<Object>(HttpStatus.OK);
    }

}

And the security config :

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Autowired
    UserService userDetailsService;

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(userDetailsService).passwordEncoder(bCryptPasswordEncoder());
    }
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf()
                .disable()
                .exceptionHandling()
                .authenticationEntryPoint(new Http403ForbiddenEntryPoint() {
                })
                .and()
                    .authenticationProvider(getProvider())
                    .formLogin()
                    .loginProcessingUrl("/login")
                    .successHandler(new AuthentificationLoginSuccessHandler())
                    .failureHandler(new SimpleUrlAuthenticationFailureHandler())
                .and()
                    .logout()
                    .logoutUrl("/logout")
                    .logoutSuccessHandler(new AuthentificationLogoutSuccessHandler())
                    .invalidateHttpSession(true)
                .and()
                    .authorizeRequests()
                    .antMatchers("/login").permitAll()
                    .antMatchers("/logout").permitAll()
                    .antMatchers(HttpMethod.GET, "/users/**").authenticated()
                    .antMatchers(HttpMethod.DELETE, "/users/**").hasRole("ADMIN")
                    .antMatchers(HttpMethod.PUT).hasRole("USER")
                    .anyRequest().permitAll()
                .and()
                    .httpBasic();
    }

    @Bean
    public BCryptPasswordEncoder bCryptPasswordEncoder() {
        return new BCryptPasswordEncoder();
    }

    private class AuthentificationLoginSuccessHandler extends SimpleUrlAuthenticationSuccessHandler {
        @Override
        public void onAuthenticationSuccess(HttpServletRequest request,
                                            HttpServletResponse response, Authentication authentication)
                throws IOException, ServletException {
            response.setStatus(HttpServletResponse.SC_OK);
        }
    }

    private class AuthentificationLogoutSuccessHandler extends SimpleUrlLogoutSuccessHandler {
        @Override
        public void onLogoutSuccess(HttpServletRequest request, HttpServletResponse response,
                                    Authentication authentication) throws IOException, ServletException {

            response.setStatus(HttpServletResponse.SC_OK);
        }
    }

    @Bean
    public AuthenticationProvider getProvider() {
        AuthService provider = new AuthService();
        provider.setUserDetailsService(userDetailsService);
        provider.setPasswordEncoder(bCryptPasswordEncoder());
        return provider;
    }
}

When I use postman my request works fine. But when I use my front every request are turned into OPTIONS request. I read multiples articles explaining it's because of Cross Origin Request and could be a 'preflight request' but I don't know how to fix it...

Any idea ?

Answer 1

The issue is caused by CORS. You need to accept request from another domain (only for local development) as it is shown here

Answer 2

The behavior is due to CORS . Their are two approaches to deal with this behavior.

1. ACCEPT HEADER on server end. Indeed this will work but, it is not a good practice to add accept header on your server code.
2. PROXY A very common architecture for any application having service , frontend is that they have proxy manager in between like nginx , apache . But again this works for production env . For development purpose angular cli comes bundled with in-built lite-server which host the live preview on ng serve .Here is the needed configuration required to setup proxy on lite server .

i. Create a file call proxy-config.json at root of the angular project. ii. Add Following content based on the server address.

{
  "/api": {
    "target": "http://localhost:8080/",
    "changeOrigin": true,
    "secure": false,
    "pathRewrite": {
       '^/api': ''
     }
   }
}

/api is the proxy part of the all the end points from your angular application

http://localhost:8080/accounts(actual server endpoint) -----> http://localhost:8080/api/accounts(proxy end point)

Then modify following script command in package.json

"start": "ng serve --proxy-config proxy.config.json --port 4200",