Django——禁止（CSRF 令牌丢失或不正确。）：/vote/

Question

我有一个网站，在 post 上有 AJAX 赞成票或反对票选项。我遇到的问题是投票在我的 Post 详细信息页面上有效，但在我的索引页面上无效。我收到错误 Forbidden (CSRF token missing or incorrect.): /vote/

两个页面调用相同的视图和 URL 模式。

index.html:

{% for post in posts %}
    <span id="post_{{forloop.counter}}" data-value="{{post.id}}"></span>
    <button class="vote_action" value="upvote_button"> + </i></button>
    
    <span id="votes">{{post.points}}</span>
                                  
    <button class="vote_action" value="downvote_button"> - </button>
{% endfor %}

<script type="text/javascript">
 // JQUERY - AJAX SCRIPT FOR voting
 $(document).ready(function(){
   {% for post in posts %}
   $('.vote_action').click(function(e) {
      var postid = document.getElementById('post_{{forloop.counter}}').getAttribute('data-value');
          var button = $(this).attr("value");
          e.preventDefault();
          $.ajax({
            type: 'POST',
            url: '{% url "vote" %}',
            data: {
              postid: postid,
              csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
              action: 'postvote',
              button: button,
            },
            success: function(json){
              if (json.length < 1 || json == undefined) {
                //empty
              }
              document.getElementById("votes").innerHTML = json['result']
            },
            error: function(xhr, errmsg, err) {}
          })
        })
        {% endfor %}
      })
      </script>

post_detail.html:

    <span id="vote_id" data-value="{{post.id}}"></span>
    <button class="vote_action" value="upvote_button"> + </i></button>
    <span id="votes">{{post.points}}</span>                           
    <button class="vote_action" value="downvote_button"> - </button>

    <script type="text/javascript">
       // JQUERY - AJAX SCRIPT FOR voting
       $(document).ready(function(){
          $('.vote_action').click(function(e) {
              var postid = document.getElementById('vote_id').getAttribute('data-value');
              var button = $(this).attr("value");
              e.preventDefault();
              $.ajax({
                type: 'POST',
                url: '{% url "vote" %}',
                data: {
                  postid: postid,
                  csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
                  action: 'postvote',
                  button: button,
                },
                success: function(json){
                  if (json.length < 1 || json == undefined) {
                    //empty
                  }
                  document.getElementById("points").innerHTML = json['result']
                },
                error: function(xhr, errmsg, err) {}
              })
            })
          })
        </script>

urls.py

urlpatterns = [
    path('vote/', views.post_vote, name='vote' ),
]

views.py

@login_required
def post_vote(request):
    if request.POST.get('action') == 'postvote':
        # get information from request about what item id it is
        id = int(request.POST.get('postid'))
        # And also which button was pressed
        button = request.POST.get('button')
        post = Posts.objects.get(id=id)

        if button == 'downvote_button':
            if not post.voters.filter(id=request.user.id).exists():
                post.voters.add(request.user)
                post.votes +=1
                post.points -=2
                post.save()

        elif button == 'upvote_button':
            if not post.voters.filter(id=request.user.id).exists():
                post.voters.add(request.user)
                post.votes +=1
                post.points +=2
                post.save()

        # return result
        post.refresh_from_db()
        result = post.points
        return JsonResponse({'result':result})
    pass

有史以来最长的 post 抱歉！我试图尽可能减少并留下基本信息。有人有什么想法吗？

Answer 1

我现在似乎可以使用我在另一个 post.

上遇到的以下方法

在index.html我改了：

csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),

到

csrfmiddlewaretoken: '{{ csrf_token }}',

我不确定这是否是解决此问题的正确方法，并且必须等到网站最终上线时才能看到它是否有效。欢迎任何意见。

Django——禁止（CSRF 令牌丢失或不正确。）：/vote/

Django -- Forbidden (CSRF token missing or incorrect.): /vote/

django

ajax

django-csrf