CORS 설정 문제 해결

문제 상황

웹 애플리케이션에서 서버에 요청을 보낼 때, CORS(Cross-Origin Resource Sharing) 정책에 의해 발생하는 에러가 있었습니다. 이 에러는 서버에서 응답을 보낼 때 Access-Control-Allow-Origin 헤더를 포함하지 않아서 발생하는 문제였습니다. 이 헤더는 해당 응답을 받을 수 있는 웹 페이지의 출처(origin)를 지정합니다.

문제 해결 과정

1. 먼저, WebSecurityConfig.java 파일에서 corsConfiguration 메서드를 확인했습니다. 이 메서드에서는 허용되는 출처(origin), 메서드, 헤더 등을 설정하고 있었습니다.

@Bean
public CorsConfiguration corsConfiguration() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList("https://spaghetticoding.shop", "http://43.202.186.51:8080", "http://localhost:3000/", "http://43.202.186.51:3000", "http://localhost:3000"));
    configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"));
    configuration.setAllowedHeaders(Arrays.asList("Origin", "Content-Type", "Accept", "Authorization"));
    configuration.setAllowCredentials(true);
    configuration.setExposedHeaders(List.of("Authorization"));

    return configuration;
}

2. 그러나 실제 요청이 "http://localhost:3000/"에서 발생했음에도 불구하고 CORS 에러가 발생하였습니다. 이는 서버가 이 출처를 허용하도록 설정되어 있지 않거나, 설정이 제대로 적용되지 않았을 가능성이 있었습니다.

3. 이 문제를 해결하기 위해, WebSecurityConfig.java 파일에서 securityFilterChain 메서드를 수정하여 CORS 설정을 적용하였습니다. 아래는 수정된 코드입니다:

@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
    http.csrf(AbstractHttpConfigurer::disable);

    http.sessionManagement((sessionManagement) ->
            sessionManagement.sessionCreationPolicy(SessionCreationPolicy.STATELESS)
    );

    http.authorizeHttpRequests((authorizeHttpRequests) ->
            authorizeHttpRequests
                    .requestMatchers(HttpMethod.OPTIONS, "/**").permitAll() // preflight 요청 허용 설정
                    .requestMatchers(PathRequest.toStaticResources().atCommonLocations()).permitAll() // resources 접근 허용 설정
                    .requestMatchers("/api/auths/**").permitAll() // '/api/auths/'로 시작하는 요청 모두 접근 허가
                    .requestMatchers("/tracks").permitAll() // '/tracks' 요청 접근 허가 (트랙 전체 조회)
                    .requestMatchers("/spaghettiiii").permitAll() // aws 테스트를 위함
                    .requestMatchers("/").permitAll() // 메인 페이지 요청 허가
                    .anyRequest().authenticated() // 그 외 모든 요청 인증처리
    );

    http.cors(cors -> cors.configurationSource(request -> corsConfiguration())); // CORS 설정 적용

    http.addFilterBefore(jwtAuthorizationFilter(), UsernamePasswordAuthenticationFilter.class);

    return http.build();
}

4. 이렇게 수정하면, securityFilterChain 메서드에서 CORS 설정이 적용되어, 서버 응답에 Access-Control-Allow-Origin 헤더가 포함되어야 합니다. 이 변경을 적용한 후에는 서버를 재시작해야 합니다.

결과

위의 수정 후, 서버를 재시작하고 API를 다시 호출했을 때, Access-Control-Allow-Origin 헤더가 적절하게 설정되어 있어 CORS 에러가 발생하지 않았습니다. 이로써, 웹 브라우저의 CORS 정책에 의해 발생하는 에러를 방지할 수 있었습니다.