CORS란?

프론트서버는 3000번대 포트, 백엔드서버는 8000번대 포트

프론트서버에서 가져온 리액트 페이지에 백엔드의 JSON 데이터를 가져오면 보이지 않는 문제

CORS 설정하기

SecurityConfig에서 설정

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {

        //cors
        http
            .cors(corsCustomizer -> corsCustomizer.configurationSource(new CorsConfigurationSource() {

                @Override
                public CorsConfiguration getCorsConfiguration(HttpServletRequest request) {

                    CorsConfiguration configuration = new CorsConfiguration();

                    configuration.setAllowedOrigins(Collections.singletonList("<http://localhost:3000>")); // 프론트엔드 포트
                    configuration.setAllowedMethods(Collections.singletonList("*")); // API요청 메서드 방식 * -> 모두 허용
                    configuration.setAllowCredentials(true);
                    configuration.setAllowedHeaders(Collections.singletonList("*"));
                    configuration.setMaxAge(3600L);

                    // 백에서 데이터 보낼때 보이게 설정 (security만, 일반 api는 CorsMvcConfig에서)
                    configuration.setExposedHeaders(Collections.singletonList("Set-Cookie"));
                    configuration.setExposedHeaders(Collections.singletonList("Authorization"));

                    return configuration;
                }
            }));
		}