Vue.js + axios + django CSRF 토큰 설정 맞추기

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 설정에 맞춘다.

axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'

3 방법 2: 백엔드 설정

• django의 설정( settings.py )을 Vue.js (axios)의 설정에 맞춘다.

CSRF_COOKIE_NAME = 'XSRF-TOKEN'
CSRF_HEADER_NAME = 'X-XSRF-TOKEN'

4 같이 보기

• CSRF