Reportlab в Django Ошибка приложения - Forbidden (CSRF-токен отсутствует или неверен.)

Я больше занимаюсь наукой о данных, но для развлечения я создал веб-приложение. Я новичок в django, javascript и HTML, и мне многое приходится обдумывать, так что если моя кодировка покажется нетрадиционной, прошу прощения. Не стесняйтесь предлагать любую обратную связь. В моем приложении я пытаюсь создать кнопку на веб-странице, которая делает следующее:

1. Reads data input from an HTML table entered by the user in JavaScript (as an array).
2. Using ajax, sends the data to a Python view.
3. There, a function will be performed on the array, and the output will be returned to the user as a PDF generated by the reportlab library.

К сожалению, я продолжаю получать следующую ошибку:

Запрещено (CSRF-токен отсутствует или неверен.): /get_custom_bingo

.

Вот полный текст ошибки:

Forbidden (CSRF token missing or incorrect.): /get_custom_bingo
[03/Sep/2021 16:07:17] "POST /get_custom_bingo HTTP/1.1" 403 2513
[03/Sep/2021 16:07:17] "POST /pages/custom_bingo.html HTTP/1.1" 200 4320
[03/Sep/2021 16:07:17] "GET /static/JS/scripts.js HTTP/1.1" 304 0

Я пытался заставить его исчезнуть, но ничего из того, что я могу найти в Интернете, похоже, не помогает моему текущему сценарию. Кто-нибудь знает, как решить эту проблему? (См. соответствующие разделы моего кода ниже):

custom_bingo.html

<form action="" method="POST">
    {% csrf_token %}
    <button class="button Submit" onclick="getCol();" />Submit</button>
</form>
<script type="text/javascript" src={% static "JS/jquery-3.6.0.min.js" %}></script>
<script type="text/javascript" src={% static "JS/scripts.js" %}></script>

JS

function getCol()
{
    var table = document.getElementById('tbl');
    var column = [];
    for(var i = 0; i<table.rows.length; i++){
        column.push(table.rows[i].cells[1].childNodes[0].value);
    }
    alert(column)
    $.ajax({
        headers: {'X-CSRFToken': '{{ csrf_token }}'},
        url: '/get_custom_bingo',
        type: 'POST',
        data: {'arr':column}
      });
}

views.py

def custom_bingo(request):
    return render(request, "bingo/pages/custom_bingo.html")

def get_custom_bingo(request):
    a = request.POST.getlist('arr[]')
    arr_lis = app_models.custom_shuff(a, 150, True) #function imported from models.py
    response = HttpResponse(content_type='application/pdf')
    response['Content-Disposition'] = f'inline; filename="bingo.pdf"'
    buffer = io.BytesIO() 
    doc = SimpleDocTemplate(buffer, pagesize = letter)
    # container for the 'Flowable' objects
    elements = []
    for arr in arr_lis:
        data = arr
        t = Table(data, 5 * [1.5 * inch], 6 * [1.4 * inch])
        # from (column, row) to (column, row)
        t.setStyle(TableStyle([...])) #table styles here
        elements.extend([t, PageBreak()])
    # write the document to disk
    doc.build(elements)
    response.write(buffer.getvalue())
    buffer.close()
    return response

urls.py

app_name = 'bingo'

urlpatterns = [
    ...
    path('pages/custom_bingo.html', views.custom_bingo),
    path('get_custom_bingo', views.get_custom_bingo, name='get_custom_bingo')
]

function getCol()
{
    var table = document.getElementById('tbl');
    var column = [];
    for(var i = 0; i<table.rows.length; i++){
        column.push(table.rows[i].cells[1].childNodes[0].value);
    }
    const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    alert(column, csrftoken )
    $.ajax({
        headers: {'X-CSRFToken': csrftoken},
        url: '/get_custom_bingo',
        type: 'POST',
        data: {'arr':column}
      });
}