Django #9 - CSRF Token 처리, Todo의 마지막..

CSRF Token 처리

views.py에서
@method_decorator 부분을 전부 지우고
브라우저에서 create 혹은 delete를 하려할 때 동작하지 않는다. 개발자 도구에서 Application 탭 - Cookie 부분을 확인해보면 파이썬 장고에서는 기본적으로 CSRF Token을 제공해준다.

이때 클라이언트와 서버간에 즉,
vue.js와 Django에서 맞춰야 되는게 있는데

csrftoken 과
X-CSRFToken
장고에서 쿠키 이름을 무엇으로 할 것인가 와,
vue.js에서 헤더에 담을 때 헤더 이름을 무엇으로 할 것인가 이다.

방법으로는 이미 Django에서는 제공해주기 때문에 설정할 필요는 없고,
todo_idnex.html에서 axios.post할 때 값을 넘겨주는 방법이 있다.

axios.post('/api/todo/create/, postData, {xsrfCookieName: 'csrftoken', xrfHeaderName: 'X-CSRFToken'}).then(function (res) {
           ....

이 방법이 있지만,
전역 스코프로 선언해두면 작성할 필요가 없다.

<script>
  
axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';

 let vm = new Vue({
....

참고
쿠키이름과 헤더이름은 python settings.py에서 변경할 수 있다.

이제 브라우저에서 create와 delete를 통해 테스트 해보면
정상적으로 작동이 되는 것을 알 수 있다.

네트워크에서 api 헤더를 살펴보면 X-CSRFToken이 잘 전송되고 있다.

GitHub Source

👉🏻깃허브 소스