[java/spring] 스프링시큐리티에서 세션 안받아지는 CORS 문제 해결하기

#들어가는 말

스프링시큐리티를 이용해 세션방식으로 로그인을 구현한다면 프론트와 서버가 합쳐져있는 프로젝트라면 CORS 문제가 없어 세션이 자동으로 쿠키에 저장이 된다. 하지만 프론트를 나누기 시작 하면 CORS 문제로 세션이 받아지지도 않고 자동으로 쿠키에 저장이 되지 않는다 그 문제를 해결할 것이다.

스프링시큐리티

GitHub - whitewise95/TIL: Today I Learned

세션방식

GitHub - whitewise95/TIL: Today I Learned

#CORS문제 없을 경우

회원가입 후 -> 로그인 -> 서버에서 시큐리티 로직을 타게되어 아래와 같이 세션이 쿠키에 저장된다.

#CORS문제

회원가입 후 -> 로그인 -> 서버에서 시큐리티 로직을 타고 내려와도 쿠키에 저장이 되지 않고 네트워크탭에서는 확인이 가능하지만 HttpOnly 이기때문에 프론트에서 접근할 방법이 없다.

 

#서버에 설정

• cors 설정에 configuration.setAllowCredentials(true); 를 추가해준다.

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.addAllowedMethod("*");
        configuration.addAllowedHeader("*");
        configuration.addAllowedOriginPattern("http://localhost:3000");
        configuration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }

• form 로그인은 쓰지 않으니 .formLogin().disable(); 해준다.

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
                .cors().configurationSource(corsConfigurationSource());

        http.addFilterBefore(formLoginFilter(), UsernamePasswordAuthenticationFilter.class);
        http.authorizeRequests()
                .antMatchers("/").permitAll()
                .antMatchers("/h2-console/**").permitAll()
                .antMatchers("/user/signup").permitAll()
                .antMatchers("/user/idCheck/**").permitAll()
                .antMatchers("/user/nicknameCheck/**").permitAll()
                .anyRequest().authenticated()
                .and()
                .formLogin().disable();

    }

#프론트에서 설정

axios를 사용함

• 전역으로 withCredentials를 true 로 설정해준다.

axios.defaults.withCredentials = true; //전역으로 적용됨

• axios 3번째 변수로 withCredentials: true // 쿠키 cors 통신 설정 설정을 해준다.

        axios.post("http://localhost:8090/user/login",
        data, 
        { 
            withCredentials: true // 쿠키 cors 통신 설정
        }

#Comment

서버와 프론트가 동시에 설정해줘야지만 세션을 받을 수 있다. 처음에 안받아져서 당황을 했지만 이렇게 간단한 방법이 있었다...