Ошибка при попытке соединить Django с ReactNative

Я создаю приложение React Native с Django в качестве бэкенда. Я настроил экран входа в React Native и настроил JWT-аутентификацию с помощью rest_framework_simplejwt в Django. Однако при попытке войти в систему я сталкиваюсь с ошибкой.

На экране входа в систему:

    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const [error, setError] = useState("");

    const handleSubmission = async () => {
        try {
            const response = await axios.post("http://127.0.0.1:8080/api/token/", {
                username,
                password,
            });
            if (!response || !response.data) {
                throw new Error("Invalid server response");
            }
            await AsyncStorage.setItem("accessToken", response.data.access);
            await AsyncStorage.setItem("refreshToken", response.data.refresh);
            navigation.navigate("Tab");
        } catch (error) {
            console.error("error", error);
            const errorMessage = error.response && error.response.data && error.response.data.message
                ? error.response.data.message
                : "Whoops! Log In Failed, please try again later 😅.";
            setError(errorMessage);
        }
    };

В Django представления:

@api_view(['POST'])
@permission_classes([IsAuthenticated])
def create_user(request):
    serializer = CreateUserSerializer(data=request.data)
    if serializer.is_valid():
        serializer.save()
        return Response(serializer.data, status=status.HTTP_201_CREATED)
    return Response({'message': "Whoops! error while creating user 🫣", 'error': serializer.errors}, status=status.HTTP_400_BAD_REQUEST)

Сериализаторы:

class CreateUserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ['username', 'password']

    def create(self, validated_data):
        validated_data['password'] = make_password(validated_data.get('password'))
        return super(CreateUserSerializer, self).create(validated_data)

и я настроил cors в settings.py, чтобы я мог делать API-запросы на своей машине:

INSTALLED_APPS = [
    'corsheaders', # DEV ONLY
    ...
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # DEV ONLY
    ...
]

CORS_ALLOW_ALL_ORIGINS = True # DEV ONLY

Ошибка, которую я получаю: LOG error [TypeError: Cannot read property 'status' of undefined]

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

  1. Убедитесь, что corsheaders установлен и правильно настроен.
  2. Убедитесь, что конечная точка бэкенда http://127.0.0.1:8080/api/token/ корректна и достижима.
  3. Записал полный объект ошибки.

Как устранить ошибку TypeError: Cannot read property 'status' of undefined error и гарантировать, что моя функциональность входа в систему работает правильно?

Чтобы подключить react native к серверу django, запустите сервер на вашем ip вместо localhost. Предполагается, что ваш ip равен 10.0.0.49

python manage.py runserver 10.0.0.49:8000

Затем измените запрос фронтенда на

const response = await axios.post("http://10.0.0.49:8080/api/token/", {
            username,
            password,
        });

У меня тоже была такая проблема с моим проектом django rn некоторое время назад, очень расстраивало

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