用于 Ajax 的 Django csrf 令牌答案

【问题标题】：Django csrf token for Ajax用于 Ajax 的 Django csrf 令牌
【发布时间】：2019-01-13 00:27:53
【问题描述】：

我在表格中给出了 {% csrf_token %}。我是否必须在 AJAX $.ajax({ .......... )} 中再提供一个 {% csrf_token %} ？

<form method="post" data-validate-username-url="{% url 'validate_username' %}">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Sign up</button>
  </form>


    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>


    <script>
    $("#id_username").change(function () {
      console.log($(this).val());
      var form = $(this).closest("form");
      $.ajax({
        url: form.attr("data-validate-username-url"),
        data: form.serialize(),
        dataType: 'json',
        success: function (data) {
          if (data.is_taken) {
            alert(data.error_message);
          }
        }
      });

    });
  </script>

【问题讨论】：

标签： python ajax django django-models django-views

【解决方案1】：

更新上述步骤 - 正如Django 文档所示，您可以使用 Javascript Cookie 库来执行Cookies.get('csrftoken')。另外，我必须在函数调用之前添加{% csrf_token %}。可能很明显，但我不知道所以在这里提供它来帮助其他人

【讨论】：

【解决方案2】：

文档很好地解释了如何使用 AJAX https://docs.djangoproject.com/en/2.1/ref/csrf/

获取此库https://github.com/js-cookie/js-cookie/
添加此var csrftoken = Cookies.get('csrftoken');

最后一步是配置ajax设置

function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
 return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
  beforeSend: function(xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
        xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
});

【讨论】：

【解决方案3】：

请参阅下文，了解我如何更改您的代码。 csrf_token 使用 Django 模板分配给一个变量。您可以在任何 Javascript 代码中生成此变量。

然后将令牌包含在标头中

 <script>
    var token = '{{csrf_token}}';

    $("#id_username").change(function () {
      console.log($(this).val());
      var form = $(this).closest("form");
      $.ajax({
        headers: { "X-CSRFToken": token },
        url: form.attr("data-validate-username-url"),
        data: form.serialize(),
        dataType: 'json',
        success: function (data) {
          if (data.is_taken) {
            alert(data.error_message);
          }
        }
      });

    });
  </script>

【讨论】：