ajax $.post 一直报 Forbidden (CSRF token missing or incorrect.)

Posted 2022-01-22 jansn

由于后台整合类视图代码，所以修改了写法，完了之后用下面的写法写的post请求都报 403 error

$.post(
        "% url 'test_record:select_node_page' ret.uut_id %",
        
            // uut_id: " ret.uut_id ",
            filter: JSON.stringify(filters),
        ,
        function(data)
            var retData = JSON.parse(data);
            console.log(retData);   // DEBUG
            $(".chassis tbody").html("");
            if(retData.nodes.length)
                $(".chassis tbody").append(make_tr_html(retData.chassis, "1"));
                retData.nodes.forEach(function(item)
                    $(".chassis tbody").append(make_tr_html(item, "2"));
                );
            else
                $(".chassis tbody").append(make_tr_html(retData.chassis, "3"));
            
            $("#uut_id").html(retData.uut_id);
            // finished
            $('.ajax_container').removeClass("loding");
            elem_resize();
        
    );

但是后台都加了 @csrf_exempt 装饰器，前台也没有要加 csrf 防御的地方了，不知道为什么还是一直报 403 error，
最后在 stackoverflow 中找到了解决方法：

ajax 请求中添加

    beforeSend: function(xhr, settings) 
        xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
    ,

最后没有再报 403 的code：

    $.ajax(
        'type':'POST',
        'data':
            filter: JSON.stringify(filters),
        ,
        'url': "% url 'test_record:select_node_page' ret.uut_id %",
        beforeSend: function(xhr, settings) 
            xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
        ,
        success: function(data)
            var retData = JSON.parse(data);
            console.log(retData);   // DEBUG
            $(".chassis tbody").html("");
            if(retData.nodes.length)
                $(".chassis tbody").append(make_tr_html(retData.chassis, "1"));
                retData.nodes.forEach(function(item)
                    $(".chassis tbody").append(make_tr_html(item, "2"));
                );
            else
                $(".chassis tbody").append(make_tr_html(retData.chassis, "3"));
            
            $("#uut_id").html(retData.uut_id);
            // finished
            $('.ajax_container').removeClass("loding");
            elem_resize();
        ,
        error: function()

        
    );