Невозможно отправить сообщения через фронтенд React и POST-запросы не работают на панели Django REST API

Я создаю приложение для чата, используя React для фронтенда и Django для бэкенда. Я столкнулся со следующими двумя проблемами:

  1. Проблема с отправкой сообщений в React:
    Когда я пытаюсь отправить сообщение через приложение React, я получаю ошибку 400 Bad Request. Запрос API к бэкенду выполняется с помощью запроса POST, но в ответе сообщается, что возникла проблема. Сообщение об ошибке не дает полной информации, и я не могу отправить сообщение.

  2. Проблема с POST-запросом в панели Django REST API:
    Когда я пытаюсь сделать POST запрос из интерфейса Django REST framework (панель администратора) для отправки сообщения в чат, запрос вроде бы проходит успешно, но перенаправляет на пустую страницу (без ошибки). Данные не публикуются, и на фронтенде ничего не меняется. Однако, когда я использую curl для отправки того же запроса, он работает нормально.

Вот фрагмент соответствующего кода React для отправки сообщений:

const handleSendMessage = async () => {
    if (message.trim() || file) {
        setSendingMessage(true);
        const formData = new FormData();
        formData.append('receiver', selectedContact.id);
        formData.append('content', message);
        if (file) formData.append('file', file);

        try {
            const response = await fetch(`http://127.0.0.1:8000/api/chat/${userData?.current_basic_user?.username}/`, {
                method: 'POST',
                headers: {
                    "Authorization": `Bearer ${token}`,
                },
                body: formData,
            });
            
            if (!response.ok) {
                console.error('Failed to send message:', response.statusText);
            }
            const responseData = await response.json();
            setChatHistory((prevMessages) => [...prevMessages, responseData]);
            setMessage('');
            setFile(null);
        } catch (error) {
            console.error("Error sending message:", error);
        } finally {
            setSendingMessage(false);
        }
    }
};

А вот код бэкенда для POST-запроса:

Что я пробовал:

  • Я проверил заголовки и данные запроса, и они кажутся правильными.
  • Я успешно разместил сообщения, используя curl, так что сам API работает нормально.
  • Я убедился, что в заголовках запроса отправлен правильный токен.
  • Я убедился, что бэкенд правильно обрабатывает POST-запрос.

Есть ли какие-нибудь соображения о том, почему это происходит или что я могу упустить?
Спасибо за помощь!

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