(→개요) |
|||
| 19번째 줄: | 19번째 줄: | ||
|} | |} | ||
==방법 1== | ==방법 1: 프론트엔드 설정== | ||
* Vue.js (axios)의 설정( 아마도 main.js )을 django 설정에 맞춘다.<ref>https://docs.djangoproject.com/en/3.0/ref/csrf/#setting-the-token-on-the-ajax-request | * Vue.js (axios)의 설정( 아마도 main.js )을 django 설정에 맞춘다.<ref>https://docs.djangoproject.com/en/3.0/ref/csrf/#setting-the-token-on-the-ajax-request | ||
</ref> | </ref> | ||
| 27번째 줄: | 27번째 줄: | ||
</source> | </source> | ||
==방법 2== | ==방법 2: 백엔드 설정== | ||
* django의 설정( settings.py )을 Vue.js (axios)의 설정에 맞춘다.<ref>https://github.com/axios/axios#request-config</ref> | * django의 설정( settings.py )을 Vue.js (axios)의 설정에 맞춘다.<ref>https://github.com/axios/axios#request-config</ref> | ||
<source lang='python'> | <source lang='python'> | ||
| 40번째 줄: | 40번째 줄: | ||
[[분류: CSRF]] | [[분류: CSRF]] | ||
[[분류: axios]] | |||
[[분류: vue.js]] | |||
[[분류: django]] | |||
2020년 7월 29일 (수) 02:56 판
1 개요
- axios + django CSRF 토큰 설정 맞추기
- vue.js + axios + django CSRF 토큰 설정 맞추기
- 백엔드에서 쿠키로 CSRF 토큰을 발급하고
- 프론트엔드에서 그 쿠키를 가지고 axios 호출시에 Header로 보내도록 한다.
- 이렇게 하면 한번의 설정만으로 간편하게 CSRF 검사를 통과할 수 있다.
- → axios.post 전에 axios.get으로 토큰을 먼저 받아오는 수고를 하지 않아도 된다.
| 구분 | 백엔드(django) | 프론트엔드(axios) | 비고 |
|---|---|---|---|
| 쿠키명 | csrftoken |
XSRF-TOKEN |
백엔드 → 프론트엔드 |
| 헤더명 | HTTP_X_CSRFTOKEN |
X-XSRF-TOKEN |
프론트엔드 → 백엔드 |
2 방법 1: 프론트엔드 설정
- Vue.js (axios)의 설정( 아마도 main.js )을 django 설정에 맞춘다.[1]
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'
3 방법 2: 백엔드 설정
- django의 설정( settings.py )을 Vue.js (axios)의 설정에 맞춘다.[2]
CSRF_COOKIE_NAME = 'XSRF-TOKEN'
CSRF_HEADER_NAME = 'X-XSRF-TOKEN'
4 같이 보기
5 참고
로그인하시면 댓글을 쓸 수 있습니다.
{{ comment.name }}
{{ comment.created | snstime }}
-
{{comment.page_title}} ―{{comment.name}}