Cookie 등록 후에도 axios.post에 403 에러가 계속 뜨는 경우

Django에서 ajax나 axios 와 같은 호출을 하는 경우 흔하게 403 에러를 볼 수 있습니다.

 

그 이유는 django에서 기본적으로 csrf를 기본적으로 검수하고 있기때문입니다.

 

csrf에 대한 제사한 설명은 아래 블로그에서 자세히 설명하여 링크 걸어둡니다~

CSRF 공격이란? 그리고 CSRF 방어 방법

일반적으로 csrf전달할 token을 포함시키는 .js 파일하나 만들어서 import 하는 경우가 대부분입니다.

 

// cookie_csrf.js
// using jQuery
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$(document).ready(function () {
    var csrftoken = getCookie('csrftoken');
    $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });
});

해당 코드로 ajax와 axios 둘다 잘 동작합니다.

 

하지만 post 메소드에서 ajax의 경우 정삭적으로 반환값이 돌아오지만 axios 같은경우 403 에러가 뜨게 되는데요

 

axios.post(url, json_text)
 .then(function (response) {
    console.log(response)
})
  .catch(function (error,) {
    console.log(error)
})
  .finally(function (data) {
    console.log(data)
});


// return 403 Forbidden

위에 코드만으로는 해결이 안되는것 같습니다. 

아무래도 csrf 메소드를 추가하는것은 jquery ajax 형식에 맞도록 짜여진것이기때문이죠!

그렇다면 axios를 위해 코드를 다시 짜야하는걸까요?ㅠㅠ

그렇지 않습니다~

axios.defaults 에 해당 내용을 입력해주면 바로 정상적으로 작동합니다!

 

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

axios.post(url, json_text)
  // 내용 /// 
});


// return 200 ok

매번 저렇게 호출하면 너무 귀찮으니 .js를 수정해서 ajax든 axios든 csrf에 대한 걱정이 사용하면 될것같네요~

 * scope 주의

 

 

틀린 내용이 있으면 언제든 댓글 남겨주세요.