Ошибка 403 при запросах к серверу на Django с сайта на React

Впервые разрабатываю сайт как фронтенд (использую JS и React) и столкнулся с проблемой при отправке запросов к серверу. При любых попытках сделать GET/PUT/POST к серверу получаю ошибку 403. Прочитав кучу вопросов, я понял, что не отправляю в заголовке токен. Но вот где его брать/генерировать я не понимаю. Как работает вся эта концепция с аутентификацией пользователя и его запросов?

Код сервера:

class ProfileView(APIView):
    permission_classes = [IsAuthenticated]

    def get(self, request):
        try:
            profile = UserProfile.objects.get(user=request.user)
        except UserProfile.DoesNotExist:
            return Response({"error": "Profile not found"}, status=status.HTTP_404_NOT_FOUND)

        serializer = UserProfileSerializer(profile)
        return Response(serializer.data)

    def put(self, request):
        try:
            profile = UserProfile.objects.get(user=request.user)
        except UserProfile.DoesNotExist:
            return Response({"error": "Profile not found"}, status=status.HTTP_404_NOT_FOUND)

        serializer = UserProfileSerializer(profile, data=request.data, partial=True)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

Код клиента:

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import axios from "axios";

const Authorization = () => {
    const [username, setUsername] = useState(''); 
    const [password, setPassword] = useState('');

    const auth = (e) => {
        e.preventDefault();
        axios.get('http://127.0.0.1:8000/api/profile/', {
            user: 'maksi',
        })
        .then(response => {
            console.log(response.data);
        })
        .catch(error => {
            console.error('There was an error posting the data!', error);
        });
    };
    return (
        <form 
            class='auth_form' 
            className="w-[630px] h-[633px] flex flex-col items-center px-[89px] py-[57px] gap-16 rounded-3xl border-[0.3px] border-[#B9B9B9] mx-auto mt-[calc(50vh-633px/2-0.32px)]"
            onSubmit={auth}>
            <h1 class='auth_title' className="text-[32px] font-gilroy_bold text-[#202224]">Авторизация</h1>
            <div class='auth_inputs'>
                <p class='field_title' id='login' className="font-gilroy_semibold text-[18px] text-[#202224] opacity-80 mb-[19px]">Логин</p>
                <input class='input_field' type='text' id='login' 
                className="w-[516px] h-[56px] rounded-lg bg-[#F1F4F9] border-[#D8D8D8] border-[1px] mb-[40px]"
                value={username} 
                onChange={(e) => setUsername(e.target.value)}
                />
                <p class='field_title' id='password' className="font-gilroy_semibold text-[18px] text-[#202224] opacity-80 mb-[19px]">Пароль</p>
                <input class='input_field' type='password' id='password' 
                className="w-[516px] h-[56px] rounded-lg bg-[#F1F4F9] border-[#D8D8D8] border-[1px]"
                value={password} 
                onChange={(e) => setPassword(e.target.value)}
                />
            </div>
            <button type='submit' className="w-[418px] h-[56px] rounded-lg bg-[#0077EB] opacity-90 border-0 font-gilroy_bold text-[20px] text-white">Войти</button>
            </form>
    );
};

export default Authorization;

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