문제 정의

1. 프론트엔드 localhost 개발 환경에서 배포된 API 서버로 로그인 요청을 보내다가 CORS 이슈 발견

   

   • http://localhost:3000(프론트엔드 개발 환경 주소)에서 다른 Origin인 API 서버 도메인 https://dev.synnote.com 으로 요청을 보내기 때문에 CORS 정책 block이 발생함

2. 같은 이슈를 웹 브라우저으로 요청 보내서 재현해봄 → CORS 이슈 없이 잘 동작하는 것을 확인

   

   

3. 강제로 CORS 이슈를 발생시키기 위하여 다른 도메인에서 웹브라우저 콘솔로 실행해봄

   

   fetch('<https://dev.synnote.com/api/v1/user/info>', {
       method: 'GET',
       headers: {
           'Content-Type': 'application/json',
       },
   })
   .then((response) => {
       for (let [key, value] of response.headers.entries()) {
           console.log(key + ': ' + value);
       }
   
       return response.json();
   })
   .then((data) => console.log(data))
   .catch((error) => {
       console.error('Error:', error);
   });
   

   • 콘솔 에러 메세지를 자세히 읽어보니, Prefilight Request 응답으로 redirection이 return 되어서 block 당했다고 되어있음

당시 백엔드 & 인프라 구조 상황

AWS EKS 환경에서 API 서버들이 Pod로 구성되어 있는 상황이였고, Ingress로는 AWS ALB가 구성되어있어 애플리케이션을 로드밸런싱 해주고 있음.

또한 AWS ALB와 Cognito를 내장 통합하여 사용자 인증을 처리하고 있음.

Listening Rules는 아래 이미지와 같이 /api/v1/user/info 에서는 인증되지 않을 경우 authenticate 규칙이 적용되어 AWS Congito 구성 도메인의 Host UI로 리다이렉션한 후 자격 증명을 입력하고 인증이 되면 기존 /api/v1/user/info 로 리다이렉션됨.

/api 의 경로는 인증되지 않을 경우 deny 규칙이 적용되어 401 Authorized 에러가 떨어짐.

Springboot Cors Configuration 코드는 다음과 같음.

@Configuration
@EnableWebMvc
class WebMvcConfig : WebMvcConfigurer {

    override fun addCorsMappings(registry: CorsRegistry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("*")
            .allowedHeaders("*")
    }
}