JQuery AJAX BeforeSend CSRF 保护

Question

我有一个显示 JSON 响应的 AJAX 进程。如果我禁用 CSRF 保护，则该过程有效。我收到 HTTP 200 并收到 JSON 响应。

工作表如下：

$(document).ready(function() {

    //AJAX
    $('form').on('submit', function(event) {
        $.ajax({
            data : {
                user : $('#user').val(),
                password : $('#password').val()
            },
            url: '/loginproc',
            type: 'POST'
        })
        .done(function(data) {
            if (data.error) {
              $('#errorAlert').text(data.error).show();
              $('#successAlert').hide();
            }
            else {
              $('#successAlert').text(data.xx).show();
              $('#errorAlert').hide();
            }
        });
         event.preventDefault();
    });

});

这在语法上是否正确？ “.done”前需要加分号吗？

我正在使用 Flask-WTForms CSRF 保护，文档说明如下：

When sending an AJAX request, add the X-CSRFToken header to it. For example, in JQuery you can configure all requests to send the token.

<script type="text/javascript">
    var csrf_token = "{{ csrf_token() }}";

    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrf_token);
            }
        }
    });
</script>

使用以下 JS 我能够获得 HTTP 200 但是，我没有得到任何 JSON 数据 returned

$(document).ready(function() {

    $('form').on('submit', function(event) {

        var csrf_token = "{{ csrf_token() }}";

        $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken)
                }
            }
        });

        $.ajax({
            data : {
                user : $('#user').val(),
                password : $('#password').val()
            },
            url: '/loginproc',
            type: 'POST'
        })
        .done(function(data) {
            if (data.error) {
              $('#errorAlert').text(data.error).show();
              $('#successAlert').hide();
            }
            else {
              $('#successAlert').text(data.xx).show();
              $('#errorAlert').hide();
            }
        });
         event.preventDefault();
    });

});

这远远正确吗？我确实得到了 HTTP 200，但没有 JSON 数据 returned。 JQuery/AJAX 让我很困惑。

问题：

表格 1（没有 CSRF 的工作表格）在语法上是否正确？
我不应该使用 "ajaxSetup" 吗？
知道为什么我没有取回 JSON 数据吗？我是否也需要在 CSRF 中包装 return？

非常感谢您的帮助，感谢您的宝贵时间。

语法正确且功能正常 2. s

Answer 1

我建议你移动 event.preventDefault();在事件提交之后也使用 console.log 所以你可以检查变量是否包含你的想法，控制台在你的浏览器中只是 google 如何在你的浏览器中打开你的控制台所以你可以检查包含什么csrf_token 以及 "done" 响应中的长度和数据 aa 并添加 .fail 以便您可以处理有错误的服务器响应。

关于问题：'Do I need to add a semicolon before ".done"?'答案是否定的，因为那是调用方法链的例子：$("#id").show().css("background", "red");在我链接显示和 css 的示例中，您可以一次链接这么多方法；）

$(document).ready(function() {

    $('form').on('submit', function(event) {
        event.preventDefault();
        var csrf_token = "{{ csrf_token() }}";
        console.log("csrf_token: ", csrf_token);

        $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken)
                }
            }
        });

        $.ajax({
            data : {
                user : $('#user').val(),
                password : $('#password').val()
            },
            url: '/loginproc',
            type: 'POST'
        })
        .done(function(data) {
            console.log("done", data.length, data); 
            if (data.error) {
              $('#errorAlert').text(data.error).show();
              $('#successAlert').hide();
            }
            else {
              $('#successAlert').text(data.xx).show();
              $('#errorAlert').hide();
            }
        })
        .fail(function( jqXHR, textStatus, errorThrown ) {
            console.error("response with error:", jqXHR, textStatus, errorThrown);
        });             
    });

});

JQuery AJAX BeforeSend CSRF 保护

JQuery AJAX BeforeSend CSRF Protection

ajax

jquery

flask

wtforms

flask-wtforms

我有一个显示 JSON 响应的 AJAX 进程。如果我禁用 CSRF 保护，则该过程有效。我收到 HTTP 200 并收到 JSON 响应。

使用以下 JS 我能够获得 HTTP 200 但是，我没有得到任何 JSON 数据 returned

问题：