Question

我有一个模板（index.html。它扩展了base.html），其中包含一个带有csrf_token的表单。我使用JS / Ajax将数据发送到我的视图。所以没问题。

问题在于，如果我将表单复制/粘贴到另一个模板（例如：new.html，它也会扩展base.html），我会得到：CSRF令牌丢失或错误不正确。（控制台中的HTTP 403错误）

两个模板都使用相同的JS功能。两个模板中的表单完全相同。

有什么建议吗？

这里的表格（在index.html和new.html中相同）：

<form method="post" action="." enctype="multipart/form-data">
{% csrf_token %}
    <a href="#" class="heart pull-right" onclick="return Favorite(this)" data="foobar">
        <i class="fa fa-heart-o"></i>
    </a>
</form>

这里是JS / Ajax函数：

function Favorite(item) {
    song_id = item.getAttribute("data"),
    $.ajax({
        type : "POST",
        datatype: "json",
        url: "/fav/",
        data: {
            'csrfmiddlewaretoken' : $('input[name=csrfmiddlewaretoken]').val(),
            song_id : song_id
        },
    });
    return false

顺便说一句，index.html中的表单位于div中。在new.html中，表单位于表格中。不知道它是否有帮助。

Answer 1

首先，如果您使用ajax发送请求，则根本不需要<form>。

其次，您也可以这样设置csrf_token：

...
data: {
    csrfmiddlewaretoken: '{{ csrf_token }}',
    song_id : song_id
},
...

总是对我有用。

Answer 2

我终于成功了（基于django doc和doniyor评论）

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

function Favorite(item) {
  song_id = item.getAttribute("data-mp3"),
  csrftoken = getCookie('csrftoken');
  $.ajax({
    type : "POST",
    datatype: "json",
    url: "/fav/",
    data: {
      song_id : song_id
    },
    headers: {
      'X-CSRFToken': csrftoken
    }
  });
  return false;
}

带有多个模板的csrf令牌问题

2 个答案: