У меня проблема с htmx и django

Я пытаюсь создать систему добавления друзей в социальных сетях с помощью django и htmx. Я продолжаю получать 403 Forbbiden, который связан с недействительным токеном csrf. Я пытался исправить это, но безрезультатно.

views.py

friends.html

{% extends "base.html" %} {% block content %}
<div>
  <input
    name="search"
    placeholder="Search for friends..."
    class="p-3 my-2 rounded-lg border-2 border-slate-300 w-full focus: outline-none focus:border-slate-500"
  />
</div>

<div class="my-3">
  <div class="flex flex-col gap-2 mb-5" id="add" hx-swap="outerHTML">
    {% for user in users_list %}
    <div
      class="p-3 flex justify-between items-center transition-colors border border-slate-300 rounded-lg"
    >
      <div>
        <p class="text-base font-medium">{{ user }}</p>
        <a
          href="{% url 'profile' user.username %}"
          class="text-slate-600 font-medium text-sm"
          >@{{ user.username }}</a
        >
      </div>
      <div>
        <button
          id="add-{{user.username}}"
          hx-post="{% url 'add_friend' user.username %}"
          hx-target="#sent-requests"
          hx-trigger="click"
          hx-swap="innerHTML"
          hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
          class="p-3 bg-purple-600 hover:bg-purple-700 rounded-lg text-white font-bold"
        >
          Add friend
        </button>
      </div>
    </div>
    {% empty %}
    <p>No user found</p>
    {% endfor %}
  </div>

  <h2 class="text-3xl font-bold my-4">Sent Friend Requests</h2>
  <div class="flex flex-col gap-2 mb-5" id="sent-requests" hx-swap="innerHTML">
    {% include "base/partials/sent_requests.html" with sent_requests=sent_requests %}
  </div>

  <div class="flex justify-between items-center">
    <h2 class="text-3xl font-bold my-4">Friends</h2>
    <p class="font-bold text-lg text-purple-600">{{friends.count}}</p>
  </div>
  <div id="friends" hx-swap="innerHTML">
    {% include 'base/partials/friends_lists.html' %}
  </div>
</div>
{% endblock content %}

sent_requests.html


{% for request in sent_requests %}
<div
  class="p-3 flex justify-between items-center transition-colors border mb-2 border-slate-300 rounded-lg"
>
  <div>
    <p class="text-base font-medium">{{ request.requests_user.name }}</p>
    <a class="text-slate-600 font-medium text-sm"
      >@{{ request.requests_user.username }}</a
    >
  </div>
  <div id="friend-{{ request.username }}">
    <button
      id="cancel-{{user.username}}"
      hx-post="{% url 'cancel_request' request.pk %}"
      hx-trigger="click"
      hx-target="#sent-requests"
      hx-swap="innerHTML"
      hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
      class="p-3 bg-red-100 hover:bg-red-200 rounded-lg text-red-800 font-bold flex gap-2 items-center"
    >
      <i class="fa-solid fa-xmark text-lg"></i> Cancel Request
    </button>
  </div>
</div>

{% empty %}
<p>No sent requests.</p>
{% endfor %}

Код должен отменять запрос по клику и затем обновлять ui отправленных запросов, а также удалять пользователей после их добавления в друзья и затем обновлять ui пользователей

Когда вы используете htmx в django для POST-запроса или любого другого запроса, вам нужно добавить hx-заголовки в тег body, как показано ниже.

<body hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'>

Это может быть решением для вашей ошибки 403 Forbbiden.

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