Django CSRF 令牌错误或缺少 Ajax POST 请求

Question

我正在尝试使用 Django 框架将 ajax 集成到 Web 应用程序中。但是，我很难尝试进行简单的 ajax 调用来工作。

我想使用表单（用户输入数据库凭据）建立数据库连接，调用 API，然后返回输出（无论成功与否）。

这是我用于处理 API 的 views.py：

# -- START from HERE !
class TestConnectionAPI(views.APIView):
    '''
    Test DB Connection from TARGET DB
    '''  
    def post(self, request):
        dbs = (request.data['host'],
                request.data['port'],
                request.data['dbname'],
                request.data['user'],
                request.data['password'],
                request.data['schema_name'])

        try:
            x = dc.DbConnection(*dbs)
            x.create_conn()
            data = x.check_conn()           
            
            result = {
                'message' : 'Success',
                'server' : f'Connection established from {data}',
                'results':{
                    'host':dbs[0],
                    'port':dbs[1],
                    'dbname':dbs[2]
                    },
            }
            return Response(result, status=status.HTTP_200_OK)
        except Exception as e:
            return Response({'Message':str(e)}, status=status.HTTP_400_BAD_REQUEST)

这是我的 connection.html 显示表单（完整代码：here）：

...
<form method="post">
                                    <div class="modal-body">
                                        <div class="form-group">
                                            <label for="host">Hostname</label>
                                            <input type="text" class="form-control" id="host" name="host" aria-describedby="host">
                                        </div>
                                        <div class="form-group">
                                            <label for="port">Port</label>
                                            <input type="number" class="form-control" id="port" name="port" placeholder="e.g., 5432">
                                        </div>
                                        <div class="form-group">
                                            <label for="database">Database name</label>
                                            <input type="text" class="form-control" id="dbname" name="dbname" placeholder="Enter database name">
                                        </div>
                                        <div class="form-group">
                                            <label for="username">Username</label>
                                            <input type="text" class="form-control" id="user" name="user" placeholder="Enter username">
                                        </div>
                                        <div class="form-group">
                                            <label for="password">Password</label>
                                            <input type="password" class="form-control" id="password" name="password">
                                        </div>
                                        <div class="form-group">
                                            <label for="schema">Schema</label>
                                            <input type="text" class="form-control" id="schema_name" name="schema_name">
                                        </div>
                                    </div>
                                    <div class="modal-footer border-top-0 d-flex justify-content-center">
                                        <a href="#form2" class="btn btn-primary" data-toggle="modal" type="submit" id="btnSubmit">Test</a>
                                        <button type="submit" class="btn btn-success">Save</button>
                                    </div>
                                </form>
...

还有，这是用于调用 API（POST 请求）的 AJAX 函数：

$('#btnSubmit').click(function () {

        let _host = $('#host').val();
        let _port = $('#port').val();
        let _dbname = $('#dbname').val();
        let _user = $('#user').val();
        let _password = $('#password').val();
        let _schema_name = $('#schema_name').val();

        var $crf_token = $('[name="csrfmiddlewaretoken"]').attr('value');

        $.ajax({
            type: 'POST',
            dataType: 'JSON',
            headers:{"X-CSRFToken": $crf_token},
            data:{
                "host" : _host,
                "port" : _port,
                "dbname" : _dbname,
                "user" : _user,
                "password" : _password,
                "schema_name": _schema_name,
            },

            url:"http://127.0.0.1:8000/api/v1/test/",
            error: function (xhr, status, error) {
                var err_msg = ''
                for (var prop in xhr.responseJSON) {
                    err_msg += prop + ': ' + xhr.responseJSON[prop] + '\n';
                }

                alert(err_msg);
                },
            
            success: function (result) {
                console.log(result);
            }
        });
    });

这是我的错误：

但是，我很难修复错误。我尝试关注 StackOverflow 论坛中的一些讨论，但仍然出现此错误。该错误与 CSRF 令牌有关，我很难按照 Django 文档进行操作。

至少我想在控制台日志上显示这个 API 响应。

{
    "message": "Success",
    "server": "Connection established from ('PostgreSQL 12.7, compiled by Visual C++ build 1914, 64-bit',)",
    "results": {
        "host": "localhost",
        "port": 5432,
        "dbname": "dvdrental"
    }
}

Added-1：POST 请求标头

你能帮我解决这个问题吗？谢谢。

Answer 1

这是我为解决问题所做的。我在主函数中添加了一些脚本。通过使用此脚本，我的错误消息：csrf token invalid or missing 得到解决。

已编辑脚本：

<script>
    // DB Connection GET method
    function BindConnection(){
        $.ajax({
            type:"GET",
            dataType: "JSON",
            url: "http://127.0.0.1:8000/api/v1/test",
            
            success: function(data){
                console.log("BindConnection output:",data);
                
                var str = "";

                for (var key in data){
                    // console.log(data[key]);
                    str += "<tr>" +
                        "<td>" + data[key] + "</td>"
                    "</tr>"
                }
                $("#divBody").html(str);
            }
        });
    }

    // DB Connection POST method
    $('#btnSubmit').click(function () {

        let _host = $('#host').val();
        let _port = $('#port').val();
        let _dbname = $('#dbname').val();
        let _user = $('#user').val();
        let _password = $('#password').val();
        let _schema_name = $('#schema_name').val();

        // added function
        function Cookies(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = cookies[i].trim();
                    // 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;
        }

        var csrftoken = Cookies('csrftoken');
        
        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);
                }
            }
        });
        // --- end of added function

        $.ajax({
            type: 'POST',
            dataType: 'JSON',
            data:{
                "host" : _host,
                "port" : _port,
                "dbname" : _dbname,
                "user" : _user,
                "password" : _password,
                "schema_name": _schema_name,
            },
            url:"http://127.0.0.1:8000/api/v1/test/",
            error: function (xhr, status, error) {
                var err_msg = ''
                
                for (var prop in xhr.responseJSON) {
                    err_msg += prop + ': ' + xhr.responseJSON[prop] + '\n';
                }

                // alert(err_msg);
                $("#divMessage").html(err_msg)
                },
            
            success: function (result) {
                var str = "";
                
                for (var key in result){
                    str += "<p>" + result[key] + "</p>"
                }
                $("#divMessage").html(str)
                console.log(str)
            }
        });
    });
</script>