Ошибка или отсутствие CSRF-токена Django при запросе Ajax POST

Я пытаюсь интегрировать ajax в веб-приложение с помощью фреймворка Django. Однако у меня возникают трудности при попытке заставить работать простой вызов ajax.

Я хочу установить соединение с БД с помощью формы (где пользователи вводят учетные данные БД), вызвать API, а затем вернуть результат (успешный или нет).

Вот мой views.py, который используется для работы с API:

# -- 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 для отображения формы (полный код: здесь) :

...
<form method="post">
                                    <div class="modal-body">
                                        <div class="form-group">
                                            <label for="hostname">Hostname</label>
                                            <input type="text" class="form-control" id="hostname" name="hostname" aria-describedby="hostname">
                                        </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="username" name="username" 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>
...

А вот AJAX функция для вызова API (POST запрос):

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

        let _hostname = $('#hostname').val();
        let _port = $('#port').val();
        let _dbname = $('#dbname').val();
        let _username = $('#username').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:{
                "hostname" : _hostname,
                "port" : _port,
                "dbname" : _dbname,
                "username" : _username,
                "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"
    }
}

Не могли бы вы помочь мне решить эту проблему? Спасибо.

Вернуться на верх