로컬 프로젝트에서는 만나지 못했던 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.
역시나 쉽게 연결을 허락해주지 않는다.. 호락호락..호락호락하지 않다..
Cross-Origin Resource Sharing
의 약자로 해석하자면교차 출처 리소스 공유 정책
이다.SOP정책에 의해서 두 출처(Origin)의 일치를 확인하게 되는데
출처(Origin)의 동일함은 두 URL의 구성 요소 중 Protocol(Scheme), Host, Port 의 3가지가 동일하다면 동일 출처로 판단한다.
고로 배포를 하게 되면서 두 출처가 일치하지 않게 되어 CORS오류를 뱉어내는 것이다. CORS에 대한 자세한 설명은 구글링 으로 ..
참고로 로컬 환경에서의 proxy
설정은 두 도메인이 일치하지 않게 되면서 사용할 수 없게 되었다.
이러한 CORS문제를 해결하기 위한 몇가지 방법이 있다.
내가 시도했던 두가지만 간단하게 설명하자면
@CrossOrigin(origins = "http://client")
을 원하는 컨트롤러 혹은 메서드에 붙여주는 아주 간단한 방법이다.
@CrossOrigin(origins = "http://client")
@RestController
public class HelloController {
... (중략)
}
첫 CORS오류와 불편한 만남 이후에 사용했지만 글로벌하게 설정하지 못한다는 단점이 있다.
전역적으로 설정을 해주기 위해 config 설정을 해주었다.
filter을 사용하는 방법보다 config가 간단해 보였기 때문에..
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를 사용하고 있다면 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
을 찾아서 사용한다고 한다.