Джанго ошибка CSRF в выборке апите Аякс

Question

Я хочу, чтобы заменить мой Jquery код Ajax с ES6 выборкой апи под рамкой Джанго это мой JQuery код Аякса

var csrf = $('meta[name="csrf_token"]').attr('value') 
     //comment vote 
     $("#comment_box").on('click', "a.vote-up", function() { 
      var voteID = parseInt(this.id.split("-")[1]); 
      $.ajax({ 
       url : "/vote_json/", 
       type : "POST", 
       dataType: "json", 
       data : { 
        "comment_id": voteID, 
        "vote": $('#up-' + voteID).attr('value'), 
        csrfmiddlewaretoken: csrf 
       }, 
       success : function(json) { 
        $('#up-' + voteID).html('<i class="chevron vote up icon"></i>' + json.vote); 
        $('#up-' + voteID).popup({ 
         position : 'top center', 
         content  : json.msg, 
         on   : 'manual' 
        }); 
        $('#up-' + voteID).popup('show'); 
        setTimeout(function(){$('#up-' + voteID).popup('hide');}, 3000); 
       }, 
       error : function(xhr,errmsg,err) { 
        alert(xhr.status + ": " + xhr.responseText); 
       } 
      }); 
      return false; 
     }); 

и этот код ES6 принести API

let csrf = document.querySelector('meta[name="csrf_token"]').getAttribute('value'); 
    //comment vote 
    [].forEach.call(document.querySelectorAll('a.vote-up'), function (voteup) { 
     voteup.addEventListener('click', function() { 
      let voteid = parseInt(voteid.id.split("-")[1]); 
      fetch('/vote_json/', { 
       method: 'POST', 
       body: JSON.stringify({ 
        comment_id: voteid, 
        vote: document.querySelector('#up-' + voteid).getAttribute('value'), 
        csrfmiddlewaretoken: csrf 
       }) 
      }).then(function (response) { 
       return response.json(); 
      }).then(function (json) { 
       document.querySelector('#up-' + voteid).innerHTML = '<i class="chevron vote up icon"></i>' + json.vote 
       document.querySelector('#up-' + voteid.popup({ 
        position : 'top center', 
        content  : json.msg, 
        on   : 'manual' 
       }), 
       document.querySelector('#up-' + voteid).popup('show'), 
       setTimeout(function() { 
        document.querySelector('#up-' + voteid).popup('hide'), 3000 
       }) 
       ) 
      }) 
     }) 
    } 

и этот код на мой взгляд в Джанго

def vote(request): 
    comment_pk = request.POST.get('comment_id') 
    vote   = request.POST.get('vote') 
    comment  = Comment.objects.get(pk=comment_pk) 
    if vote == 'true': 
     comment.up += 1 
     comment.save() 
     response_dict = dict(vote=comment.up) 
    elif vote == 'false': 
     comment.down -= 1 
     comment.save() 
     response_dict = dict(vote=comment.down) 
    return HttpResponse(json.dumps(response_dict), content_type='application/javascript') 

проблема заключается в том, что в jquer y code все работает, но в es6 django отвечает «CSRF-проверка не удалась. Запрос прерван.», И я тестировал выборку Ajax кода в Получе без блока тела и другой вид Джанго в этом режиме работают отлично

Answer 1

Копировать вставленные из here.

Решения было в методе getCookie().

fetch("/graphql", { 
     method: "POST", 
     credentials: "same-origin", 
     headers: { 
      "X-CSRFToken": getCookie("csrftoken"), 
      "Accept": "application/json", 
      'Content-Type': 'application/json' 
     }, 
     body:JSON.stringify(query) 
     }) 

И, конечно, метод должен быть на той же странице. Взято из Джанго Docs.

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; 
}