카카오 인증 API 를 서버에서 호출하고, React app 에서 해당 API 를 호출하면 작동하지 않습니다

안녕하세요, 소셜 로그인 관련해서 문의드릴 사항이 있습니다.
현재 저는 Django 로 백엔드 서버를 만들어두었고, React.js 를 사용하여 프론트앤드를 만들었습니다.

소셜 로그인 구현을 함에 있어, 인증 과정을 백엔드에 만들어 두고,
React 에서 해당 API 를 호출하는 방법을 써보았는데 정상적으로 작동하지 않아 방법이 잘못되었는지
궁금하여 여쭙니다.

백엔드 서버를 켜고 (localhost:8000) 아래의 get_kakao_code 라는 엔드포인트를 브라우저로 실행시키면,
로그인 화면이 잘 나타납니다.
이것을 React 쪽에서 (localhost:3000) 백엔드의 get_kakao_code 엔드 포인트를 호출하는 방법으로 할 경우,
로그인 화면이 나타나지 않습니다.

Screen Shot 2022-07-28 at 2.23.00 PM

def get_kakao_code(request):
    print("*" * 30, "get code")
    app_rest_api_key = settings.KAKAO_REST_API_KEY
    redirect_uri = "https://127.0.0.1:8000/auth/kakao/callback/"
    return redirect(
        f"https://kauth.kakao.com/oauth/authorize?client_id={app_rest_api_key}&redirect_uri={redirect_uri}&response_type=code"
    )

# # access token 요청
def kakao_callback(request):
    print("*" * 30, "callback")
    params = urllib.parse.urlencode(request.GET)
    return redirect(f'https://127.0.0.1:8000/auth/kakao/callback?{params}')

이런 방식으로 구현했을 때 왜 예상했던대로 작동하지 않을까 여쭙니다.

안녕하세요.

Frontend에서 카카오측 호출하는게 아니라 Backend에 일임하는 방식으로 구현하시는 군요.

웹브라우저에서 다른 도메인을 호출할때 기본적으로 CORS차단됩니다.

Backend측에서 CORS를 열어주시면 될 것 같습니다.

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS