H2 콘솔에 접속은 되었지만 연결 거부 이미지들이 뜰 때(Spring Security)

문제

백엔드를 스프링부트로 구성하고 프론트를 리액트로 구성 중
로컬에서 h2를 사용해서 접속하려는데 접속은 했는데 연결거부 이미지들이 발생.

예상 원인

1. Spring Security가 정적 리소스 접근을 차단한 경우

2. 프록시 설정 문제 (React 개발 서버가 간섭하는 경우)

3. H2 콘솔 경로 설정에 문제가 있는 경우

해결 방안

Spring Security 설정이 있는경우 해당 설정 클래스파일에 h2 관련 설정 추가

@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
    http
        .csrf(csrf -> csrf.disable())
        .headers(headers -> headers.frameOptions().disable()) // H2 콘솔 표시용
        .authorizeHttpRequests(auth -> auth
            .requestMatchers("/h2-console/**").permitAll()
            .anyRequest().permitAll()
        );

    return http.build();
}

headers().frameOptions().disable() 부분은 iframe 차단을 해제하는 부분인데 h2 콘솔이 iframe으로 되어있어서 해당 설정을 넣어준다!