[JPA] React 브라우저 서버 / Spring boot 서버 연동 시, 쿠키 / Session 설정 (3)

 

 

React에서 프론트엔드 부분의 브라우저 서버를 단독 포트를 가진 서버를 열게되고,

Spring boot에서도 서버도 단독으로 포트를 가진 서버를 열게된다.

 

react + vite 를 통한 로컬서버 포트

 

Spring boot를 통한 로컬서버 포트

 

세션 + 쿠키를 통해서 로그인 기능을 구현하려고 할 때,  기존에는 JDBC에서 프론트엔드 코드가 동일한 프로젝트 내에 JSP 파일로 존재해서 같은 포트내에서 적용되고 있었다. 그래서 같은 포트 번호내에서 존재한 프론트엔드와 백엔드 코드간의 세션에 있어서

 

JAVA를 통한 HttpSession 클래스에 세션을 setAttribute() 메서드를 통해서 session을 생성하게되면 JSP 파일로 열린 브라우저 내에 어플리케이션 정보의 세션에 등록이 되는 것을 확인할 수 있다.

 

하지만 별로의 포트로 열린 리액트 / spring boot 의 구조에서는 다르다.

 

spring boot 서버측에서 세션을 등록해도 다른 포트번호로 별로도 열린 리액트 브라우저 서버에서 세션이 등록되지 않는다. 그저 spring boot 서버 내에서 생성이 되었고 리액트 브라우저에서는 세션이 등록된 줄 모르고 있다는 것이다.

 

이것은 CORS(Cross-Origin Resource Sharing) 설정을 통해서 해결할 수 있다.

 

서로 다른 포트에 있어서 세션을 등록할 때, 브라우저 단에 세션을 등록해주기 위해서는 Spring boot 쪽에서 

어플리케이션 시작 시 설정을 반영하는 @Configuration 을 통해서 설정을 해주어야 한다.

 

WebConfig

 

 

• @Configuration
  • Spring Bean으로 등록되어 애플리케이션 시작 시 설정을 반영
• implements WebMvcConfigurer
  • Spring MVC 설정을 커스터마이징할 수 있도록 해줌
• addCorsMappings
  • 특정 URL 패턴에 대해 CORS 정책을 적용
  • "**" 는 모든 경로를 의미
• allowedOrigins
  • 허용할 클라이언트 도메인을 지정
  • 주의: allowCredentials(true)와 함께 "*"를 쓰면 오류가 납니다. 반드시 구체적인 도메인을 명시
• allowedMethods
  • 요청 허용 HTTP 메서드 지정. OPTIONS도 포함해야 preflight 요청 처리 가능
• allowCredentials(true)
  • 브라우저에서 쿠키, 인증 헤더 등을 포함한 요청 허용

 

 

 

추가로 세션에 담긴 쿠키/인증 정보를 포함해서 Cross-Origin 요청을 보내기 위해서는 다음과 같이 

fetch 함수 내에 두번째 파라미터로 사용되는 option 객체에서 credentials 필드를 'include'로 설정해주어야 한다.

 

값설명

"omit"	쿠키나 인증 정보를 보내지 않음 (기본 아님)
"same-origin"	같은 출처(Same Origin) 요청일 때만 쿠키/인증 정보 포함 (기본값)
"include"	Cross-Origin 요청에서도 쿠키/인증 정보 포함

 

 

다음과 같이 React+vite 개발 서버 5173 포트와 Spring Boot 서버 8080 포트를 같이 사용할 때, 프론트에서 쿠키를 포함한 인증을 사용하기 위해서는 현재 설정을 필요로 한다.