Токен CSRF отсутствует или недействителен.-> Первая форма не справляется с другой работой токена CSRF - PullRequest
Новая
       35

Токен CSRF отсутствует или недействителен.-> Первая форма не справляется с другой работой токена CSRF

1 голос
/ 26 марта 2019

Итак, у меня есть сайт с несколькими кнопками. Эти кнопки находятся внутри форм и используют этот {CSRF}. Однако первая кнопка не будет работать.

Это фрагмент того, как выглядит HTML. 

<form  method="post" id="post-form">
                      {% csrf_token %}
                      <button type="submit" name="startVm" class="btn btn-default btn-block d-none d-md-block">StartVM</button>
                </form>
                <form  method="post" id="post-form">
                      {% csrf_token %}
                      <button type="submit" name="stopVm" class="btn btn-default btn-block d-none d-md-block">StopVM</button>
                </form>

И это функция Ajax, которую я использую. 

$('#post-form').on('submit', function(e){
        e.preventDefault();
        console.log("form submitted!")  // sanity check
        post();
    });
    // AJAX for posting
    function post() {
        console.log("create post is working!") // sanity check
        $.ajax({
            url : '', // the endpoint
            type : 'post', // http method
            data : {},
            csrfmiddlewaretoken: '{{ csrf_token }}',
            contentType: 'application/x-www-form-urlencoded',
            processData: true,
            // handle a successful response
            success : function() {
               alert("Thank you for your comment!");
                console.log("success"); // another sanity check
            },

            // handle a non-successful response
            error : function(xhr,errmsg,err) {
                $('#results').html("<div class='alert-box alert radius' data-alert>Oops! We have encountered an error: "+errmsg+
                    " <a href='#' class='close'>&times;</a></div>"); // add the error to the dom
                console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
            }
        });
    };

Так как я и сказал. Кнопка StartVM не работает и возвращает ошибку 403. (Запрещено (токен CSRF отсутствует или неверен.): /) Второй, однако, работает без проблем.

Это код в view.py 

def post (self, request):
    if request.method == 'POST' and 'startVm' in request.POST:
        print("startVM button")
        return HttpResponse("{}",
        content_type='application/json', status=204)
    if request.method == 'POST' and 'stopVm' in request.POST:
        print("stopVM button");
        return HttpResponse("{}",
        content_type='application/json', status=204)
    return HttpResponse("{}",
    content_type='application/json')

Я возвращаю статус 204, потому что e.preventDefault () не будет работать и обновляет весь сайт, если я нажму на кнопку.

1 Ответ

0 голосов
/ 26 марта 2019

Во-первых, идентификаторы должны быть уникальными, но у вас есть id="post-form" в двух отдельных формах.

Вы можете вместо этого сделать class="post-form" и изменить свой JS на .post-form.

Или, для шаблона в вашем вопросе, у вас может быть один тег <form>, содержащий обе кнопки.

Далее необходимо включить токен CSRF внутри данных формы. 

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

В качестве альтернативы, вы можете следовать предложению в документах и ​​добавить заголовок X-CSRFToken для запросов ajax, тогда вам не нужно включать токен в данные поста.

...