{{csrf_token}} 给我 403 Forbidden 和 {%csrf_token%} 给我 500 服务器错误

Question

我读到这两个基本上是同一件事，但每个都给我不同的错误，我不确定要追哪一个。我什至不知道如何解决这个问题。有人可以看看我的代码吗，我已经为此苦苦挣扎了两天。

我的html

<div id='notificationsLoader'>
    </div>
<script>
$(document).ready(function(){
  $(".notification-toggle").click(function(e){
    e.preventDefault();
    $.ajax({
      type:"POST",
      url:"{% url 'get_notifications_ajax' %}",
      data: {
        csrfmiddlewaretoken:"{%csrf_token%}",
      },
      success: function(data){
        $("#notificationsLoader").html('<h3>notifications</h3>');
        $(data.notifications).each(function(){
          $("notificationsLoader").append(this + "<br/>")
        })
        console.log(data.notifications);
      },
      error: function(rs, e){
        console.log(rs);
        console.log(e);
      }


    })
  })
})
</script>

其他html

 <li><a class="notification-toggle" href="#">notification</a></li>

通知来自我的 python 代码

@login_required
def get_notifications_ajax(request):
    notification = Notification.objects.get(id=id)
    notes =[]

    for note in notifications:
        notes.append(str(note))
    data={
        "notifications":notes
        }
    json_data = json.dumps(data)
    return HttpResponse(json_data, content_type='application/json')

还有更多内容，但我只发布这部分，因为我认为错误（403 和 500）是说我的服务器端错误

Answer 1

来自Django Project Documenation：

虽然上述方法可以用于 AJAX POST 请求，但它有一些不便：您必须记住将 CSRF 令牌传递为 使用每个 POST 请求发布数据。为此，有一个 替代方法：在每个 XMLHttpRequest 上，设置一个自定义 X-CSRFToken 标头到 CSRF 令牌的值。这通常更容易，因为 许多 javascript 框架提供了允许设置标头的钩子 对每个请求。

因此，您可以将 csrftoken 值作为 X-CSRFToken 标头传递，它可以从 cookie 中获取（我已添加 getCookie 函数以满足该需求）。您可以通过在发送之前使用 ajaxSetup 设置您的 ajax 请求来轻松做到这一点，请参见下面的代码：

// Source https://docs.djangoproject.com/en/1.7/ref/contrib/csrf/#ajax    
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;
}

$(".notification-toggle").click(function(e){
  e.preventDefault();
  var token = getCookie('csrftoken');
  $.ajaxSetup({'headers': {'X-CSRFToken': token}});
  // $.ajax... 

您也可以尝试从以下位置替换您的数据：

data: {
        csrfmiddlewaretoken:"{%csrf_token%}",
      },

到

data: {
        csrfmiddlewaretoken:$("input[name=csrfmiddlewaretoken]").val()
      },