axios 라이브러리 'withCredentials' 오류 대처 방법

Axios는 JavaScript에서 HTTP 요청을 쉽게 만들고 처리할 수 있는 라이브러리입니다. Axios를 사용하면 서버로 HTTP 요청을 보내고 응답을 처리하는 작업을 간단하게 수행할 수 있어 많은 개발자들이 사용하고 있습니다.

그런데, 새로운 프로젝트를 시작하면서 백앤드 서버로 POST 요청을 보낼 때 403 Forbidden 오류가 계속 발생했습니다.

개발 작업에게 가장 난해하고 신경쓰이는 것이 서로 다른 도메인 주소를 사용하는 백앤드(Django), 프론트앤드(VueJS)의 보안 설정 문제입니다.

403 오류는 요청을 허용할 수 없다는 것이기에 CORS, CSRF 설정을 다시 점검했습니다. 하지만 문제를 발견할 수 없어 이틀에 걸쳐 이것 저것 수정해 보았으나 도무지 어떤 부분의 문제인지 알아낼 수 없었습니다.

구글링을 통해 힌트를 얻은 것은  axios 라이브러리에서 CSRF 토큰을 전송하기 위해 사용하는 ‘withCredentials’ 가 ‘withXSRFToken’ 으로 대체된다는 것이었습니다.

좀 더 자세히 살펴보니, 이번 프로젝트에서 install한 axios 라이브러리 버전(1.6.2)부터 ‘withXSRFToken’을 사용하라는 글을 보게 되었습니다.

https://github.com/axios/axios/releases/tag/v1.6.2

axios 해더에 withXSRFToken을 true 로 설정하고 실행했더니 403 오류가 사라졌습니다.

혹시 비슷한 문제가 발생하였다면 이 부분을 체크해 보시기 바랍니다.