[React] Axios와 JWT로 로그인 구현 시 쿠키값이 안 받아지는 에러 해결

문제점

난생처음 Axios와 JWT를 사용해서 로그인 기능을 구현하면서 근 일주일 넘게 난항을 겪은 에러가 있었다

바로 로그인 버튼을 누르면 accessToken과 refreshToken이 저절로 application-storage-cookies값에 저장이 되어야하는데 안되고 있는 상황이었다.

 

해결방법

1. api 서버와 클라이언트 서버의 주소가 같지 않으면 쿠키를 주고받을 수 없다

- 아래와 같이 해당 주소만 허락해주도록 설정

 (Access-Control-Allow-Origin: "*"와 같이 모든 주소 가능하게 해주면 보안이 위험해짐)

  // backend(api) 서버
  app.use(cors({ credentials: true, origin: "http://localhost:3000" }));

// 클라이언트 서버 login.js
axios.post(`http://localhost:8080/api/auth/login`,
                data,
                {
                    headers: {
                        "Content-Type": `application/json`,
                        "Access-Control-Allow-Origin": `http://localhost:3000`, //이 주소만 허락
                        withCredentials: true, // 쿠키 전달가능하게 해주는 코드
                        credenitals: true,
                    },
                }
            )

-> 하지만 이렇게만 설정하면 왜인지 withCredential: true가 작동하지 않는다 (이 부분에서 엄청 해맸다..)

-> 그래서 아래와 같이 전역적으로 설정하는 방법으로 바꿨다

// 클라이언트 서버 login.js

function Login() {
	//전역적으로 설치
    axios.defaults.withCredentials = true;

    //로그인하기 버튼 함수
    async function onSubmit(e) {
    ...
    }
}

 

결과! 매우 잘들어왔다!

 

 

일주일 헤멘거 치고는 매우 매우 간단해보이는 해결방법이었다.. 눈물.. 하지만! jwt에 대해 일주일 공부할 수 있어 지식 듬뿍 향상되는 느낌이라 좋았다.