[SpringSecurity] Vue와 Spring의 서로 다른 도메인 문제 해결하기.(CORS 에러 해결하기)

 

 

 

vue와 spring은
서로 다른 도메인을 가져 생기는
CORS 에러를 해결해보자.

 

 

 

 

 

1. 문제 살피기

 

현재 프로젝트는 Vue로 프론트를 맡고 있고, Spring으로 백엔드를 맡고 있다. Vue에서 회원가입에 관련된 정보를 입력한 후 버튼을 눌러도 Spring엔 어떤 데이터도 도착하지 않았다. 왜 그런걸까?

 

Vue는 http://localhost:5173/를 기본 주소로 사용하고 Spring은 http://localhost:8080/을 기본 주소로 사용한다. Spring은 기본적으로 다른 도메인에서 온 요청을 거부하기 때문에, Vue에서 온 요청이 제대로 처리되지 않는다. 제대로 처리하기 위해 Spring 내부에 설정을 추가해야한다.

 

 

 

 

---

 

 

 

 

 

2. 코드 살피기

• @CrossOrigin + http.cors( ) 코드 예시

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:5173")
public class RegisterController {

    @Autowired
    private MemberService memberService;

    @PostMapping("/register")
    public ResponseEntity<String> register(@RequestBody RegisterRequest request) {

        ....
        
    }
}

@Configuration
@EnableWebSecurity
public class SecurityConfig {
    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
                .cors(cors -> {}); 
        return http.build();
    }

}

@CrossOrigin은 origins에 적은 경로로 요청이 올 경우 해당 컨트롤러가 작동하도록 연결힌다. 그러나 @CrossOrigin만 설정한다고 해결되는 것은 아니다.

브라우저는 본요청 전에 프리플라이트(Preflight)를 보낸다. 이 프리플라이트 요청은 브라우저가 실제 요청 전에 서버에 보내는 사전 검사 요청이다. 이 요청을 통해 브라우저는 서버가 해당 요청을 허용하는지 확인한다. 이때 프리플라이프 요청은 OPTIONS 메서드를 사용해 서버로 보내지며, 서버는 이 요청에 대한 응답으로 CORS 헤더를 설정하여 클라이언트가 실제 요청을 할 수 있는지 알려준다. 

프리플라이트는 스프링 시큐리티 필터를 먼저 지나가면서 http.cors( )가 꺼져 있으면, 시큐리티가 프리플라이트를 처리하지 못해 401 혹은 403이 나고 @CrossOrigin이 있는 곳까지 도달하지 못한다. 그래서 SpringSecurity 클래스를 만들어 어노테이션 주입하고 SecurityFilterChain에서 http.cors(cors -> {});를 적어 통과되게 해준다.

물론 이 방법말고 더 권장하는 방법이 있다. 바로 CORS를 전역 설정하는 것이다. @CrossOrigin이 컨트롤러마다 붙어있어서 관리비용이 올라가고 충돌이 일어날 수도 있다. 이런 점을 방지하기 위해 전역 관리를 해주는게 더 좋다. (근데 난 안했다)

 

 

 

• 전역 설정 코드 예시

@Configuration
public class SecurityConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:5173")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

 

 

매핑은 모든 경로가 가능하도록 /**로 설정했고, 도메인은 http://localhost:5173이 된다. 그러면 localhost:5173으로 부터 온 모든 경로인 http://localhost:5173/login 혹은 http://localhost:5173/register 등 다 가능하도록 설정한 것이다. 그리고 서버 요청 방식은 "GET", "POST", "PUT", "DELETE"만 가능하도록 했다.

.allowedHeaders("*")는 모든 헤더를 허용한다. 여기서 헤더는 Host(요청 서버 주소), Origin(요청을 보낸 도메인), Authorization(JWT 토큰 같은 인증 정보), Content-Type(텍스트 혹은 Json 등), 쿠키와 같은 HTTP 요청/응답에 붙는 부가 정보를 말한다. 브라우저는 이 요청에 이런 헤더들을 붙여도 되는지 서버에게 묻는데, *을 통해 모든 헤더를 사용 가능하도록 설정해둔 것이다. 내가 보낼 요청에 필요한 헤더들을 받을 수 있도록 설정해둬야 CORS 오류가 발생하지 않는다.

.allowCredentials(true)은 자격 증명에 관한 것으로 브라우저가 요청을 보낼 때 함께 전달할 수 있는 민감한 인증 정보를 말한다. 보통 자격증명은 쿠키, Authorization 헤더 등이 있다. 프론트에서 백엔드로 요청을 보낼 때 쿠키나 인증헤더를 브라우저가 자동으로 붙일 수 있는지 설정한다. true는 당연히 포함해도 좋다라는 의미이다. 

 

 

 

- 전역 설정 코드 출처

Spring Boot에서 CORS 설정하기: 크로스 도메인 요청 허용을 위한 필수 가이드

 

 

 

 

---

 

 

 

3. 실제 코드 예시

//의존성주입
@Configuration
//스프링 시큐리티를 활성화하고 웹 보안 설정을 구성
@EnableWebSecurity
public class SecurityConfig {
    //빈등록
    @Bean
    //실제 보안 규칙(인가/인증/CSRF/CORS 등)을 정의한 빈
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
                .csrf(csrf -> csrf.disable())
                // 오류로 인해 허용해줌 -> 개발 이후 다시 수정해야함
                .authorizeHttpRequests(authz -> authz
                        //해당 경로는 누구나 접근 가능하도록
                        .requestMatchers("/api/register").permitAll()
                        .requestMatchers("/api/login").permitAll() 
                        //DB도 접근 가능하도록
                        .requestMatchers("/h2-console/**").permitAll()
                        //Kakao 로그인 접근 가능하도록
                        .requestMatchers("/oauth/kakao").permitAll()
                        // 모든 요청 인증 없이 허용
                        .anyRequest().permitAll() 
                )
                //헤더 설정, H2(DB) 콘솔을 iframe으로 띄우기 위해 설정
                .headers(headers
                        -> headers.frameOptions(frameOptions -> frameOptions.disable()))
                //CORS 허용하겠다고 정의        
                .cors(cors -> {}); 
        //위의 설정값을 토대로 SecurityFilterChain 객체를 생성해서 빈으로 등록
        return http.build();
    }

    // 비밀번호 해시 빈, 회원가입 시 해시 저장하고 로그인 시 해시 비교에 필요
    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

 

 

 

- @EnableWebSercurity와 SecurityFilterChain

[SpringSecurity] @EnableWebSecurity, SecurityFilterChain 개념과 예시