Django Ajax 的 CSRF 令牌

Question

我已经在表单中放置了{% 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>

- Learning Django

Answer 1

请看下面我如何修改您的代码。在Django模板中，将csrf_token分配给一个变量。您可以在任何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>

- ceds

Answer 2

这份文档非常清楚地讲解了如何使用AJAX。https://docs.djangoproject.com/en/2.1/ref/csrf/

1. Get this library https://github.com/js-cookie/js-cookie/
2. Add this var csrftoken = Cookies.get('csrftoken');

3. The last step is configure ajax setup

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

- Krystian Kazimierczak

Answer 3

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

- Manish NewProjects