Почему я получаю ошибку 403 Forbidden при выполнении POST-запроса к API входа в систему в Vue.js?

Я работаю над приложением Vue.js, в котором пользователи могут входить в систему через API, используя библиотеку axios. Однако, когда я отправляю POST-запрос на конечную точку API, я получаю ответ 403 Forbidden.

Вот Vue.js код для запроса на вход в систему:

    const response = await axios.post(
    'https://apibackup.example.com/api/login/',
    {
        username: email.value,
        password: password.value
    },
    {
        headers: {
            'Content-Type': 'application/json'
        },
        withCredentials: true,
        withXSRFToken: true
    }
)

А вот представление входа в систему из бэкенда Django:

def login_view(request):
if request.method == 'POST':
    try:
        data = json.loads(request.body)
        form = LoginForm(data)
        if form.is_valid():
            username = form.cleaned_data['username']
            password = form.cleaned_data['password']

            user = authenticate(request, username=username, password=password)

            if user is not None:
                login(request, user)
                # Logic for handling user types here...
            else:
                return JsonResponse({'status': 'error', 'message': 'Invalid username or password'}, status=401)
        else:
            return JsonResponse({'status': 'error', 'errors': form.errors}, status=400)
    except json.JSONDecodeError:
        return JsonResponse({'status': 'error', 'message': 'Invalid JSON data'}, status=400)

Вот соответствующие настройки из Django settings.py:

    CORS_ALLOW_CREDENTIALS = True

CORS_ALLOWED_ORIGINS = [
    'https://example.com',
    'http://localhost:5173',
    # other domains...
]

CSRF_TRUSTED_ORIGINS = [
    'https://example.com',
    'http://localhost:5173',
    # other domains...
]

CSRF_COOKIE_SAMESITE = 'None'
CSRF_COOKIE_SECURE = True
CSRF_COOKIE_DOMAIN = 'example.com'

Проблема: Когда я пытаюсь войти в систему, в консоли браузера появляется следующая ошибка:

POST https://apibackup.example.com/api/login/ 403 (Forbidden)

Это указывает на то, что запрос запрещен, но я не уверен, почему. Настройки сервера вроде бы разрешают необходимые происхождение и учетные данные, но запрос все равно не выполняется со статусом 403.

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

Убедились, что настройки CORS в settings.py правильно установлены для домена и включают учетные данные. Проверили правильность установки флагов withCredentials и withXSRFToken в запросе axios. Убедился, что настройки CSRF настроены правильно. Не мог бы кто-нибудь помочь мне понять, почему я получаю эту ошибку 403 Forbidden и как ее решить?

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