[Django] vanilla JS로 장고 CSRF Ajax 요청

 vanilla JS로 장고 CSRF Ajax 요청

function parse_cookies() {
    var cookies = {};
    if (document.cookie && document.cookie !== '') {
        document.cookie.split(';').forEach(function (c) {
            var m = c.trim().match(/(\w+)=(.*)/);
            if(m !== undefined) {
                cookies[m[1]] = decodeURIComponent(m[2]);
            }
        });
    }
    return cookies;
}
var cookies = parse_cookies();
 
 
//
// SEND THE FORM!
//
var request = new XMLHttpRequest();
request.setRequestHeader('X-CSRFToken', cookies['csrftoken']);                                           
request.open("POST", "/path/to/view/");
var formElement = document.querySelector("#myform");
request.send(new FormData(formElement));

장고로 Ajax 요청을 보내면 CSRF 토큰에 대한 이슈가 있다.

이를 해결하기 위해 공식 홈페이지에서는 토큰을 첨부하는 JQuery 코드를 제공주는데,

바닐라 JS는 코드가 없어서 한참 헤멘 끝에 구글에서 예제코드를 찾을수 있었따.

JQuery를 사용하지 않고 vanilla JS로 사용할 경우 Ajax 함수 세팅에서 위와 같은 코드를 추가해 주면 된다.

출처 : http://musings.tinbrain.net/blog/2015/aug/28/vanilla-js-meets-djangos-csrf/