[SpringBoot] CORS 설정하기

울상냥·2023년 2월 10일

SpringBoot

목록 보기
3/11

로컬 프로젝트에서는 만나지 못했던 CORS오류를 배포를 하면서 만나게 되었다.

클라이언트에서 서버로 요청을 보내면 이러한 오류를 뱉어낸다.

Access to XMLHttpRequest at 'http://server' from origin 'http://client' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

역시나 쉽게 연결을 허락해주지 않는다.. 호락호락..호락호락하지 않다..


CORS가 무엇이냐 하면

Cross-Origin Resource Sharing 의 약자로 해석하자면 교차 출처 리소스 공유 정책 이다.

SOP정책에 의해서 두 출처(Origin)의 일치를 확인하게 되는데

출처(Origin)의 동일함은 두 URL의 구성 요소 중 Protocol(Scheme), Host, Port 의 3가지가 동일하다면 동일 출처로 판단한다.

고로 배포를 하게 되면서 두 출처가 일치하지 않게 되어 CORS오류를 뱉어내는 것이다. CORS에 대한 자세한 설명은 구글링 으로 ..

참고로 로컬 환경에서의 proxy 설정은 두 도메인이 일치하지 않게 되면서 사용할 수 없게 되었다.

이러한 CORS문제를 해결하기 위한 몇가지 방법이 있다.


CORS 설정하기

내가 시도했던 두가지만 간단하게 설명하자면

1. @CrossOrigin 어노테이션 사용하기

@CrossOrigin(origins = "http://client") 을 원하는 컨트롤러 혹은 메서드에 붙여주는 아주 간단한 방법이다.

@CrossOrigin(origins = "http://client")
@RestController
public class HelloController {
	... (중략)
}

첫 CORS오류와 불편한 만남 이후에 사용했지만 글로벌하게 설정하지 못한다는 단점이 있다.
전역적으로 설정을 해주기 위해 config 설정을 해주었다.
filter을 사용하는 방법보다 config가 간단해 보였기 때문에..

2. CorsConfig 생성하기

WebMvcConfigurer 의 addCorsMappings를 오버라이딩 하여 작성한다.

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedMethods("*")
                .allowedOrigins("http://client");
    }
}
  • addMapping : 모든 경로를 설정해 줄 것이기 때문에 /**로 설정
  • allowedMethods : 모든 http method를 허용할 것으로 *로 설정

위와 같은 설정 이후 회원가입과 로그인 테스트에서 아무런 문제가 없었다.
문제는 로그인 이후에 CORS오류를 다시 만나게 되었다.. (그만..그만해주세요)
원인은 springsecurity쪽에 있었다.

SpringSecurity를 사용한다면

springsecurity를 사용하고 있다면 WebSecurityConfig에도 CORS설정을 해주어야 한다.

@RequiredArgsConstructor
@EnableWebSecurity
public class WebSecurityConfig {


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

        http.cors();
        
        ...(중략)

        return http.build();
    }

filterChain 에 http.cors()를 추가해주면 CORS놈과 한발짝 멀어질 수 있다.
위와 같은 설정을 해주면 Bean에 등록된 corsfilter 또는 corsconfigure을 찾아서 사용한다고 한다.

profile
안되면 되게하라

0개의 댓글