Невозможно получить данные из django в react [duplicate]

Итак, я создаю страницу входа в систему. Я создал свои модели, а также представления и конечные точки. При входе в систему я пытался получить данные из бэкенда с помощью django, чтобы проверить введенные учетные данные, но получил ошибку времени выполнения

TypeError: Failed to fetch at HandleSubmit Я успешно зарегистрировал пользователя, проверил в базе данных, чтобы убедиться, что пользователь существует

Основной обзор моей установки. У меня есть модель LoginDetails, которая была установлена как AUTH_USER_MODEL в settings.py.

Вот моя модель

class LoginDetails(AbstractUser):
    user_data = models.OneToOneField(UserData, on_delete=models.CASCADE, null = True)
    username = models.CharField(max_length=255, unique=True, null=True)
    password = models.CharField(max_length=255, null=True)  # Note: It's recommended to use hashed passwords in production

    USERNAME_FIELD = 'username'
    def __str__(self):
        return self.username

Вот мой login.js (выкладываю только релевантную информацию) EDIT: Выкладываю полный файл

import React, { useState} from 'react';
import { Link, useNavigate } from 'react-router-dom';
import '../css/login.css';
import axios from 'axios';

function Login() {
  const initalFormData={
    username: '',
    password: '',
  };
  const [formData, setFormData] = useState({...initalFormData});
  const navigate = useNavigate();
  const [redirect, setRedirect] = useState(false);
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
      const response = await fetch('http://127.0.0.1:8000/api/login/', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        credentials: 'include',
        body: JSON.stringify({
            formData
        })
      });

      const content = await response.json();
      setRedirect(true);
  };

  return (
    <div className="login-container">
      <h2>Login</h2>
      <form onSubmit={handleSubmit}>
        <div className="input-group">
          <label htmlFor="username">Username</label>
          <input
            type="text"
            id="username"
            name="username"
            value={formData.username}
            onChange={handleChange}
            required
          />
        </div>
        <div className="input-group">
          <label htmlFor="password">Password</label>
          <input
            type="password"
            id="password"
            name="password"
            value={formData.password}
            onChange={handleChange}
            required
          />
        </div>
        <button type="submit">Login</button>
      </form>
      <div className="register-link">
        <span>Don't have an account? </span>
        <Link to="/employeeregistration">Register</Link> 
      </div>
    </div>
  );
}

export default Login;

И представление, связанное с моей конечной точкой api/login.

EDIT: Я добавил оператор печати в нижеприведенное представление, чтобы проверить, принимает ли оно введенное имя пользователя

В терминале python, на котором запущен сервер django, при печати имени пользователя я получаю None.

class LoginView(APIView):
    def post(self, request):
        username = request.data.get('username')
        password = request.data.get('password')
        

        print(username)

        user = LoginDetails.objects.filter(username=username).first()
        if user is None:
            return Response({'error': 'Invalid username'}, status=status.HTTP_401_UNAUTHORIZED)
        if not user.check_password(password):
            return Response({'error': 'Invalid password'}, status=status.HTTP_401_UNAUTHORIZED)
        
        print(user.user_data.role)
        
        payload = {
            'id': user.id,
            'exp': datetime.datetime.utcnow() + datetime.timedelta(minutes=60),
            'iat': datetime.datetime.utcnow()
        }
        
        token = jwt.encode(payload, 'secret', algorithm='HS256').decode('utf-8')

        response = Response()

        response.set_cookie(key='jwt', value=token, httponly=True)
        response.data = {
            'jwt': token
        }
        return response

Вот сериализатор, который я использую

class LoginDetailsSerializer(serializers.ModelSerializer):
    class Meta:
        model = LoginDetails
        fields = '__all__'
        extra_kwargs = {'password': {'write_only': True}}

        def create(self, validated_data):
            password = validated_data.pop('password', None)
            instance = self.Meta.model(**validated_data)
            if password is not None:
                instance.set_password(password)
            instance.save()
            return instance

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