[Deployment] consistent csrf problem after deployment

[tippy33]

Hello, our team deployed our service according to the process dealt at practice session, but we're undergoing ongoing CSRF problem after deployment. The error message looks like this:

Due to the error above, the site is not running correctly. However, there is no problem when running the server at our local environment; this problem is an issue only at the deployed setting. May I ask whether there is a solution to this problem? Or are there any other teams undergoing similar problem?

[young924]

혹시 해당 에러 해결하셨나요? 저희도 똑같은 문제가 발생하는데 해결을 못하고 있습니다..

[fuofwi]

안녕하세요, 해당 이슈 올린 팀원입니다. 최종확인을 해봐야겠지만 일단 솔루션을 찾은 것 같아서 코멘트 남깁니다. 아마 저희처럼 index.js 나 app.jsx 등에 아래 두 줄을 넣으신 상황일 것 같은데요,

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN';

이 두 줄은 backend 로부터 cookie를 '받아 왔을 때' csrf token을 이후 보내는 request에 header로 같이 보내주는 것이지, 이 두 줄 자체가 backend 로부터 cookie를 받아오는 것은 아닌 듯합니다. 그래서 token을 받아오는 요청을 어딘가에 명시해주어야 합니다.

저희는 App.js 파일에 axios.get('/api/token/') 한 줄 추가했더니 잘 되는 것 같습니다.

*backend에서 request의 header(안에 csrf token이 있는지)를 확인하려면 view에서 request.headers 를 출력해보면 되고, 브라우저에서는 (크롬 기준) dev tool -> Application -> Storage -> Cookie를 확인해보면, csrftoken을 잘 갖고 있는 경우 해당 값이 보이네요