Cru.js com Django erro no csrf_token

Desenvolvimento Web
1

Boa tarde, tudo bem?
Estava tentando fazer o mesmo exemplo do vídeo Desenvolvimento Web com Flask, só que com Django, mas no envio do form informa que verificação CSRF falhou, mesmo colocando o {% csrf_token %}.
Dando uma olhada na documentação do htmx, vi que tem de usar o hx-headers=‘{ “X-CSRFToken”: “{{ csrf_token }}” }’ no form.
Com o cru.js tem alguma forma de enviar o csrf_token?

1 curtida
2

Tem sim, você pode definir os headers de todas as requisições para pegar o csrf_token.
Basta colocar esse código após a chamada da biblioteca do cru.js:

$C({
  'prefix_url': '', // '/api/v1'
  'headers': {
     'Content-Type': 'application/json',
     'X-CSRFToken': {{ csrf_token }},
  },
  'callbacks': {},
})

Ou então, seguindo a propria documentação do Django nesse link, criando uma função que obtem o token:

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const 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;
}

Dessa forma você pode usar nessa inicialização do cru.js:

$C({
  'prefix_url': '', // '/api/v1'
  'headers': {
     'Content-Type': 'application/json',
     'X-CSRFToken': getCookie('csrftoken')
  },
  'callbacks': {},
})