[React] axios 의 withCredentials

django 와 react 를 통해 프로젝트를 진행하고 있는데 두 서버를 연결하는데 있어서 몇 가지 문제점이 발생하였습니다.

django CORS

[Django] CORS, Cross-Origin Resource Sharing

첫 번째 문제점은 위의 블로그에 정리한 것처럼 포트 번호가 다른 두 서버간의 발생하는 문제점이었고 django 에서 포트 3000번도 허락해줌으로서 해결하였습니다.

이번 포스팅에서는 겪었던 두 번째 문제점에 대해서 정리해보도록 하겠습니다.

 

withCredentials

서버의 자세한 코드까지는 설명하는게 과할거 같아 기본적인 logic만 소개를 하자면, 아이디와 비밀번호가 서버로 넘어오면 유저의 정보가 맞는지 확인한 후에 cookie에 token을 발급하게 됩니다.

그 후 다른 페이지에서의 인증도 이 token을 통해 이뤄지게 되죠.

하지만 통신이 아무리 성공적으로 이뤄져 로그인이 성공하더라도 별다른 에러도 없이 인증이 이루어지지 않았습니다.

확인 결과, cookie에 token 값이 정상적으로 들어가지가 않았습니다.

같은 origin의 경우 request header 에 cookie가 추가되는데 orgin이 달라지는 경우 자동으로 추가되지 않아 생기는 문제점이었습니다.

이를 해결하기 위해서는 서버와 클라이언트 둘 다 추가적인 작업이 필요합니다.

 

front

axios 로 통신할 시,withCredentials 설정을 true로 바꿔줘야합니다.

const handleLogin = () => {
  axios.post(`${EndPoint.APIServer}/myauth/login/`, {
    profile: {
      username: username,
      password: password
    }
  },
    { withCredentials: true }
  ).then(response => {
    console.log(response);
    console.log(response.data);
  })
}

 

backend

backend에서도 마찬가지로 Credential 설정을 true 로 해줘야합니다.

서버를 어느 것으로 하느냐에 따라 설정하는 방법이 다르겠지만 이번 포스팅에서는 django 서버에서 위의 포스팅에 이어서 설정을 추가하겠습니다.

settings 에 아래 설정을 true로 바꿔주면 됩니다.

# settings.py

CORS_ALLOW_CREDENTIALS = True

 

최종적으로 cookie에 token 값이 정상적으로 추가되는 것을 확인할 수 있습니다.