인프런 커뮤니티 질문&답변

강좌 완강하고 난뒤에 리액트랑 연계프로젝트 만들면서 jwt작업하다가 궁금한게 있어서 질문드립니다.

1.리액트(localhost:3000) ,스프링부트 (localhost:8080) 의 Cors 설정입니다

@Configuration

@EnableWebMvc

public class WebConfig {

    private static final Long MAX_AGE = 3600L;

    private static final int CORS_FILTER_ORDER = -102;

    @Bean

    public FilterRegistrationBean corsFilter() {

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        CorsConfiguration config = new CorsConfiguration();

        config.setAllowCredentials(true);

        config.addAllowedOrigin("http://localhost:3000");

        config.setAllowedHeaders(Arrays.asList(

                HttpHeaders.AUTHORIZATION,

                HttpHeaders.CONTENT_TYPE,

                HttpHeaders.ACCEPT));

        config.setAllowedMethods(Arrays.asList(

                HttpMethod.GET.name(),

                HttpMethod.POST.name(),

                HttpMethod.PUT.name(),

                HttpMethod.DELETE.name()));

        config.setMaxAge(MAX_AGE);

        source.registerCorsConfiguration("/**", config);

        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));

        bean.setOrder(CORS_FILTER_ORDER);

        return bean;

    }

}

Security 설정일부입니다

    @Bean
    SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
       return http
                .authorizeRequests(requests -> requests
                            .requestMatchers("/login", "/signup", "/user").permitAll()
                            .requestMatchers("http://localhost:8080/main")
                            .hasAnyAuthority("ROLE_USER")
                 )

                .formLogin(login -> login
                        .loginPage("/login")
                        .usernameParameter("username")
                        .loginProcessingUrl("/loginProcess")
                        .successHandler((req, res, auth) -> {
                           //여기선 토큰이 잘 나옵니다 데이터 
                            String token = JwtUtil.generateToken(auth.getName());
                            res.addHeader("Authorization", "Bearer " + token);
                        })
                    )
                    .logout(logout -> logout
                        .logoutSuccessUrl("/login")
                        .invalidateHttpSession(true)
                    )
                    .csrf(csrf -> csrf.disable())
                    .build();

            }

프론트쪽 react 입니다.

axios
      .post(`${SERVER_URL}/loginProcess`, null, { params: loginData })
      .then((response) => {
       //authorization,Authorization 바꿔봐도  둘다 안나옵니다.
        const token = response.headers["authorization"];
        console.log("토큰:::::::::::::::::::::::::::::" + token); <==undefined가 나와요
        localStorage.setItem("token", token);
      })
      .catch((error) => console.log("Error:", error));

문제점 :

서버에서 로그인은 정상적으로 되고 token생성까진 되는데

jwt의 토큰을 클라이언트인 리액트 쪽에서 받아오질 못하네요

이거 혹시 어디가 잘못된건지 알수있을까요 ?