일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- CSS
- c++
- Django
- 파이썬 알고리즘
- Git
- HTML
- Baekjoon
- 알고리즘 연습
- 알고리즘 문제
- java
- django rest framework
- MAC
- DRF
- django ORM
- AWS
- Algorithm
- 장고
- javascript
- react
- django widget
- form
- 알고리즘 풀이
- 백준
- js
- 파이썬
- 알고리즘
- PYTHON
- es6
- API
- web
- Today
- Total
수학과의 좌충우돌 프로그래밍
[React] axios 의 withCredentials 본문
django 와 react 를 통해 프로젝트를 진행하고 있는데 두 서버를 연결하는데 있어서 몇 가지 문제점이 발생하였습니다.
첫 번째 문제점은 위의 블로그에 정리한 것처럼 포트 번호가 다른 두 서버간의 발생하는 문제점이었고 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 값이 정상적으로 추가되는 것을 확인할 수 있습니다.
'웹프로그래밍 > React' 카테고리의 다른 글
[React] react의 네비게이션, react-router-dom (1) | 2020.04.01 |
---|---|
[react] react-create-app의 Proxy (0) | 2020.02.27 |
[React] Axios 와 CSS (0) | 2020.01.27 |
[React] Component Life Cycle method (0) | 2020.01.26 |
[React] Class Component 와 State (1) | 2020.01.26 |