CORS 관련 문제에 대한 이슈

[CoffeerLatte]

강사님께 올릴 이슈입니다.

현재 일반 JWT 인증 방식 로그인 구현과 소셜(Oauth2)방식의 로그인 방식 두가지를 모두 구현하려고 시도 중 입니다.

일반 JWT방식의 인증은 정상적으로 TOKEN을 받는 것까지 진행할 수 있었습니다. (VUE의 AXIOS를 이용하여 브라우져의 LOCAL STORAGE에 저장하는 방식)

추가로, 소셜 로그인을 진행 후 성공 시, JWT를 발행하는 방식의 서비스도 합쳐서 구현 중에 CORS 문제가 해결이 어려워 이슈 올립니다.

기존 코드( JWT 단일)이용 시 올바르지 않은 유저가 로그인 버튼을 누르면 401 에러가 정상 발생합니다. 현재 추가된 (JWT + Oauth2(JWT)) 방식은 로그인 버튼을 누르면 ( 소셜 로그인 버튼이 아니고 기존 로그인 버튼) 정상 동작하던 기능이 CORS 에러를 리턴하면서 동작하지 않습니다.

현재 에러를 잡기 위해 소셜 로그인 버튼은 주석 처리되어 있습니다.

(JWT + Oauth2(JWT)) 에러 (개발자도구)

기존 코드( JWT 단일) 로그인 실패시 에러( 정상 동작 캡처본임)

CORS 관련 백엔드 처리 부분 코드1

@Configuration
public class CorsMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry corsRegistry)
    {
        corsRegistry.addMapping("/**")
                .allowedOrigins("http://localhost:8080")
                .exposedHeaders("Set-Cookie");

    }
}

CORS 관련 백엔드 처리 부분 코드2

 http
                .cors((cors) -> cors
                        .configurationSource(new CorsConfigurationSource() {
                            @Override
                            public CorsConfiguration getCorsConfiguration(HttpServletRequest request) {

                                CorsConfiguration configuration = new CorsConfiguration();

                                configuration.setAllowedOrigins(Collections.singletonList("https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=1074874386105-qlcav64d5j58f07o9aep4snpko0elgs1.apps.googleusercontent.com&scope=profile%20email&state=4hgbORAB6RerDA_0gXiu50nHKt4TUL_pJfbamrB6lM8%3D&redirect_uri=http://localhost:8081/login/"));                           
                                configuration.setAllowedMethods(Collections.singletonList("*"));
                                configuration.setAllowCredentials(true);
                                configuration.setAllowedHeaders(Collections.singletonList("*"));
                                configuration.setMaxAge(3600L);
                                configuration.setExposedHeaders(Collections.singletonList("Set-Cookie"));
                                configuration.setExposedHeaders(Collections.singletonList("Authorization"));

                                return configuration;
                            }
                        }));

구글 API 인증 설정

추가 내용

1. postman을 이용한 form data를 post하면 정상적으로 토큰을 받아오는 것 같습니다.
2. 추가로 get을 통한 실제 login(api) 페이지에 데이터를 얻어보면 쿠키 및 header로 token이 보입니다.

[Seull1]

[CoffeerLatte]

• [x] 소스 코드 tag url 입니다.

• https://github.com/team4-order/4team_final_MainSpring/commit/1781ba757b758fc8957174c6be4b555a32327cee

• [x] vue 페이지 소스 코드 추가드립니다.

• https://github.com/team4-order/4team_final_MainVue/commit/59cfaef946520aa6600f8c99087613cd5b9a2d6e