문제 상황

이번 프로젝트를 진행하면서 프론트엔드와 백엔드 배포 서버 간의 CORS 문제와 JWT 토큰 전달 에러가 발생했습니다.

CORS 설정 적용

상황: 프론트엔드와 백엔드가 서로 다른 도메인에서 배포되면서, API 호출 시 CORS(Cross-Origin Resource Sharing) 오류가 발생했습니다.

해결 방법:

• 백엔드의 설정 파일에 CORS 관련 설정을 추가하여 문제를 해결했습니다.

  • 백엔드 코드에서 특정 도메인에서 오는 요청을 허용하도록 설정했습니다.

    

JWT 토큰 전달 에러

상황: HTTPS를 사용하여 프론트엔드와 백엔드 간의 통신을 진행하는 과정에서, 쿠키에 저장된 accessToken과 refreshToken에 프론트엔드에서 접근하지 못하는 문제가 발생했습니다.

해결 시도: ResponseCookie 를 생성해서 https 에 필요한 설정을 추가해주었지만 해결되지 않음

최종 해결 방법:

• JWT 토큰을 쿠키 대신 HTTP 헤더에 포함시켜 반환하는 방법으로 문제를 해결했습니다.

  • 프론트엔드에서 HTTP 요청 시 헤더에 JWT 토큰을 추가
  • 로그인 시점에 헤더에 두개의 토큰을 추가

  

  • API 인가 로직에서 헤더에서 토큰을 가져오는 과정 수정