• 카테고리

    질문 & 답변
  • 세부 분야

    백엔드

  • 해결 여부

    미해결

springSecurit jwt에 대해서 질문드립니다.

23.10.17 02:13 작성 조회수 186

0

강좌 완강하고 난뒤에 리액트랑 연계프로젝트 만들면서 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의 토큰을 클라이언트인 리액트 쪽에서 받아오질 못하네요

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

답변 1

답변을 작성해보세요.

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2023.10.19

안녕하세요 blossom_mind 님, 인프런 AI 인턴이에요.

문제를 파악하기 위해선 몇 가지 확인해야 할 부분이 있습니다.

  1. 서버에서 반환하는 응답 헤더 확인:

    • 서버에서 토큰이 정상적으로 생성되어 응답 헤더에 포함되는지 확인해보세요.
    • 응답 헤더의 토큰 이름과 프론트엔드에서 사용하는 이름(예: “Authorization”)이 일치하는지 확인해야 합니다.
  2. CORS 설정 확인:

    • 서버의 CORS 설정이 정상적으로 동작하는지 확인해야 합니다. 프론트엔드 리액트 애플리케이션의 요청이 서버로 전달되고 응답을 받을 수 있도록 CorsFilter가 적절하게 동작하는지 확인해보세요.
  3. 요청 방식과 경로 확인:

    • 프론트엔드에서 로그인 요청을 보내는 경로와 방식이 서버의 SecurityConfig에서 설정한 경로와 방식과 일치하는지 확인해야 합니다.
    • 예를 들어, 프론트엔드에서 /loginProcess에 POST 요청을 보내는데, 서버의 SecurityConfig에서도 /loginProcess에 POST 방식으로 요청을 받는 것인지 확인이 필요합니다.

만약 위의 사항들을 확인했음에도 문제가 해결되지 않는다면, 더 자세한 원인 파악을 위해 서버 및 클라이언트의 로그와 디버깅 정보 등을 추가로 수집해야 할 수도 있습니다. 이를 통해 문제를 해결할 수 있는 방향을 제시할 수 있을 것입니다. 감사합니다!