[Spring Boot] 스프링 부트 + 리액트 CORS 쿠키 저장 실패 이슈 발생 시 서버에서 시도해볼 조치들

# 서론

현재 상황은 스프링 부트 서버용 PC1 과 리액트 개발 환경 PC2 에서 서로 통신테스트를 하는 상황이다.

 

리액트에서 스프링 부트 서버(PC1)로 요청을 보내면 CORS 이슈가 발생하여, 리소스 접근에 제한된다.

 

특히나 쿠키와 같은 헤더 정보가 저장되지 않는 이슈가 생기는데, 이와 비슷한 상황시 서버사이드에서 조치해볼 내용들을 정리한다.

 

기본적으로 리액트 내부에서 Proxy 설정과, withCredentials 설정을 해줘야 한다.

 

 

# WebMvcConfigururer 설정

// CORS 설정
override fun addCorsMappings(registry: CorsRegistry) {
    registry.addMapping("/**")
        .allowedOrigins("http://127.0.0.1:5173") // vite 쓰는 리액트에서 오리진 요청을 열어줘야함 (포트 주의)
        .allowedMethods("*") // http 모든 메소드 요청 허용
        .allowedHeaders("*") // 헤더 정보 모두 허용
        .allowCredentials(true) // 쿠키, 세션 정보도 허용
}

• allowedOrigins를 * 와일드 카드 옵션으로 전부 열지 말고, 특정 오리진에서 오는 요청만 허락해준다. Create-React-App을 쓰지 않고,  Vite를 쓰면 포트 번호를 꼭 주의한다.
• allowedCredentials 을 true로 설정해줘야 쿠키 정보를 저장할 수 있다.

# application.yml 설정

server:
 servlet:
  # CORS 이슈때문에 일단 풀어놔야함.. 근데 보안상 이슈가 없는지는 모르겠음...
   cookie:
     same-site: None
     secure: true

• same-site 옵션을 None으로 설정한다. 꼭 secure 속성도 true로 설정해줘야 한다. http-only는 따로 설정 안 해줘도 무방한 것 같다..
• 서버 PC에서 포스트맨으로 요청을 보내려면 cookie: 이 아래 부분을 전부 주석으로 처리해야 쿠키값을 넣어서 보낼 수 있다.

 

이렇게 하면 CORS 이슈를 피해서 클라이언트에 쿠키를 저장할 수 있다. 하지만 조사를 해본 결과, 스크립트로 쿠키를 변경하거나 탈취하는 공격을 막기위해서 이를 막아놨다고 봤는데, 이러면 해당 공격에 취약해지는게 아닐까하는 우려가 있다.

 

쿠키-세션 기반 로그인은 지양하고 JWT를 도입하여 인증 로직을 구현해야하는 이유가 바로 이런 문제들 때문인 것 같다.