[next.js + axios + django] CSRF 검증에 실패했습니다 error

Reason given for failure:
    CSRF token missing.

In general, this can occur when there is a genuine Cross Site Request Forgery, or when Django’s CSRF mechanism has not been used correctly. For POST forms, you need to ensure:

...

 

서버에 post 요청을 보냈더니 CSRF 검증에 실패했다며 403 에러가 떴다.

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:8000/api/v1'
axios.defaults.withCredentials = true
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.xsrfCookieName = 'csrftoken' //추가
axios.defaults.xsrfHeaderName = 'X-CSRFToken' //추가

export const fetcher = <T = unknown>(url: string) => axios.get<T>(url).then((res) => res.data)

 

이 글을 참고해서 위와 같이 쿠키네임, 헤더네임을 추가했더니 해결되었다!

 

로컬스토리지를 통해서 인증을하는대신,
쿠키에 저장된 토큰들로 인증을 하도록 인증환경을 구축해서 발생한 문제였다.