[Django] 외부 자바스크립트 jquery ajax 통신 csrf token 설정하기

외부 js 파일에서 ajax 통신으로 장고랑 연결하다가.

Forbidden (CSRF token missing or incorrect.): 

에러를 받았다.

 

html 안에서처럼 post 방식으로 보낼때, {{ csrf_token }} 으로 했는데 이 방법이 잘못된 것 같다.

 

---

장고 공식문서에서는 2가지 방법을 제안한다.

1. csrf 검사를 프리패스 시킬것

(보안상 권장하지 않는 방법이라고 한다. 이 글에서는 기록하지 않겠다. 찾으면 많이 나와용)

 

2. js 파일에서 csrf token 값을 생성

(코드가 공식문서에 나와있다.)

 

---

 

아래 참고한 블로그에서는 html 파일에서 csrf token 값을 변수에 할당하고 그 값을 외부 js 파일에 불러와서

csrfmiddlewaretoken 값으로 보내주었다.

문서에 보면 csrfmiddlewaretoken 이라는 이름으로 특정 값을 POST 시에 데이터로 같이 보내도록 되어 있다.

 

나는 html 과 js 파일을 최대한 불리하고 싶어서

js 파일에서 csrf token 값을 생성하고

csrfmiddlewaretoken 값으로 보내주었다.

 

//csrf token
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 = cookies[i].trim();
            // 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;
}

var csrftoken = getCookie('csrftoken');


//길찾기 버튼 클릭
$("#find_botton").click(function(){
    //출발지 목적지 주소 -> 좌표변환
    new Promise((succ, fail) =>{
        $.ajax({
            type:'POST',
            url : setpointpage,
            
            data:{
                'StartAddr' : $('#StartAddr').val(), 
                'EndAddr' : $('#EndAddr').val(),
                'csrfmiddlewaretoken':  csrftoken,
            },
        
            success : (result) => {
                resultArray=result;
                console.log(resultArray)
                succ(result);  //성공하면 검색결과 처리
            },
            fail: (error) => {
                console.log(error);
            }
        });
    //resultA
    });

 

jquery post 통신 완료!

 

참고

살짝 야매..? 내가 해결할 때 도움 많이 받음 : http://blog.bluekyu.me/2012/03/django-ajax-post-csrftoken.html

공식문서 방법 : https://jinmay.github.io/2019/04/09/django/django-ajax-csrf/