카카오 로그인 RestApi 구현시 배포 환경에서만 로그인 처리가 되지 않습니다

안녕하세요.
앱ID : 953756

로컬에서는 정상 작동되었으나 EC2 서버에 배포하고부터는 로그인이 되지 않습니다.
환경은 스프링부트, 리액트 이고 서버, 프론트 모두 로컬환경 일때만 정상적으로 작동합니다.

서버(로컬) - 프론트(로컬) = 정상작동
서버(http://13.209.xxx.xx:8080) - 프론트(로컬) = x
서버(http://13.209.xxx.xx:8080) - 프론트(http://3.34.xxx.xx:3000) = x

로컬에서 정상 응답시

비정상 응답시
코드, 스테이트 등은 카카오 서버로부터 잘 받아오나,
request 에는 JsessionId가 들어있지 않습니다.
302 에러가 내려온걸 더블클릭해서 보면 스프링 서버에는 정상적으로 카카오 로그인되고 응답값이 내려가는 상태입니다.

yml

spring:
  security:
    oauth2:
      client:
        registration:
          kakao:
            client-id: 
#            redirect-uri: http://localhost:3000/oauth/kakao
            redirect-uri: http://3.34.xxx.xx:3000/oauth/kakao
            authorization-grant-type: authorization_code
            client-authentication-method: POST
            client-name: KAKAO
            scope:
              - openId
              - profile_nickname
              - profile_image
              - account_email
        provider:
          kakao:
            authorization_uri: https://kauth.kakao.com/oauth/authorize
            token_uri: https://kauth.kakao.com/oauth/token
            user-info-uri: https://kapi.kakao.com/v2/user/me
            user_name_attribute: id
useEffect(() => {
  onLoading(true);
  axios
    .get(
      `http://13.209.xxx.xx:8080/oauth/kakao?code=${code}&state=${state}`,
      {
        headers: { 'Content-Type': 'application/json' },
        withCredentials: true,
      },
    )
    .then(response => {
      const { accessToken, refreshToken, memberId } = response.data;
      auth.login(accessToken, refreshToken, memberId);
      navigate('/');
      onLoading(false);
    })
    .catch(() => {
      onLoading(false);
    });
}, []);

검색해보니 url 문제라고 하여 리다이렉트 url을 앞 주소를 제외한 뒷부분 /oauth/kakao 이런식으로 넣어서 해결되는 케이스를 보았습니다.

이걸 yml 파일에 설정하면 url 로 인식을 하지 못하고, 프론트 코드에 넣어도 마찬가지 입니다.
여러가지를 해보았는데 해결이 되지 않아 도움을 요청합니다.

안녕하세요.

첨부해주신 두번째 이미지를 보면 카카오에서 정상적으로 302 리디렉션 한것으로 확인되고, 이후 서비스측에서 토큰 발급에 실패 하는 것으로 보입니다.

yml 설정을 보면 http://3.34.xxx.xx:3000/oauth/kakao 으로 설정하고 계시는데요.
이 주소가 접근 가능한 주소인지 확인 부탁드립니다.

security 설정의 redirectionEndpoint를 확인해 보시면 좋을것 같습니다.

http://3.34.xxx.xx:3000/oauth/kakao 이건 접근 가능한 주소이고, http://localhost:3000/oauth/kakao 으로 해도 같은 증상입니다.
서버 엔드포인트도(.and().redirectionEndpoint().baseUri(“/oauth/kakao”)) 정상적으로 잘 등록되어 있습니다.
같은 소스코드, 같은 설정일 때 로컬-로컬에서만 정상 작동하고 서버-로컬, 서버-서버 일떄 문제가 생기는 케이스 입니다.
이후 토큰 발급 실패는 프론트에서 카카오로부터 정상적으로 응답 받아왔지만 마지막에 쿠키를 서버로넘겨주지 못하고 있어 발생하는 상황입니다.

http://3.34.xxx.xx:3000/oauth/kakao 으로 접근할수 없습니다.
다시 확인 부탁드립니다.

별개로, 서비스는 80으로 제공되나, 카카오 로그인 시 전달되는 redirect_uri 파라미터는 http://3.34.xxx.xx:3000/oauth/kakao 으로 보입니다.

로그인만 포트를 따로 구분할 필요가 없을것 같은데요.
이렇게 구성하신 이유가 따로 있을까요?

현재 도메인 연결중이라 접근이 안됐었던것 같습니다. http://3.34.xxx.xx/oauth/kakao 으로 접근 가능하게 반영 해두었습니다. 이런 접근 문제는 아니었고, 쿠키가 전달이 안되는 문제인것같습니다.

로그인 포트를 따로 구분한건 이렇게 요청을 보냈을때만 정상적으로 동작을 했었기 때문에 이렇게 구성했는데, 잘못된 부분이나 고쳐볼 부분이 있을까요?

특별한 이유가 없는 경우 포트로 구분할 필요 없습니다.
대부분 서비스의 앤드포인트는 80 또는 443(ssl)으로 제공 됩니다.

프론트와 백엔드 서버가 나누어저 있고, 로그인을 백엔드에서 처리하시는 것으로 보입니다.
프론트는 80으로 백엔드는 3000으로 제공하는 것으로 보이는데요

보통 이렇게 하지 않고 앞단에 nginx와 같은 웹서버를 두고 reverse proxy로 처리 합니다.
reverse proxy 설정 시, 서브도메인으로 구분하거나 path로 구분하여 사용자의 요청이 프론트가 처리해야 할지, 백엔드가 처리해야 할지를 구분하여 요청을 전달합니다.

리다이렉트를 백엔드로 받는다고 생각하시는 걸까요? 리다이렉트는 프론트(3000번포트) 로 받고있고 그 요청을 받은 프론트가 백엔드에 별도 요청을 통해 이후 인증절차를 진행하고있습니다.

프론트에서 인가코드를 백앤드로 전달 하셔도 무방하시나, 위와같이 사용자 브라우저에서 스크립트로 제어하기보다 백엔드에서 처리하시는것을 권장드립니다. useEffect(..., []) hook 사용은 구현에 따라 영향 받으며 단한번 동작한다고 보장되지 않아 오류 발생 가능성이 높습니다.

답변 감사합니다.
백엔드로 리다이렉트 받아서 쿼리파라미터로 내리는걸로 해결 하였습니다.
이게 맞는 방법은 아닌거 같지만 우선 로그인 처리는 해결되어 리스폰스바디로 받는 방법을 찾아보겠습니다.
감사합니다.