(Django-React App) Запрос API к бэкенду возвращает 200 OK, но не проходит аутентификацию во фронтенде

Что я разрабатываю?:

Здравствуйте, я разрабатываю Django-React App, где Django выступает в качестве бэкенда для аутентификации с использованием библиотеки Djoser и JWT, а React выступает в качестве фронтенд-приложения. Кроме того, я использую Django-rest-framework, CORS заголовки, Axios и React Redux для осуществления всех коммуникаций между бэкендом и фронтендом

Контекст проблемы:

Я работаю на Ubuntu 20.04 под названием 'pablo-dev.ivanlab.lan', через SSH соединение на Visual Code, и я запускаю там файл docker-compose, который запускает микросервисы в контейнерах docker, которые выставляются на машине Ubuntu, так что все тестирование я делаю через SSH на Visual Code.

Я создаю микросервисную архитектуру в виде приложения Django-React-Postgres в docker-compose, чтобы развернуть его на Raspberyy Pi 4 с ОС Raspbian. Поскольку Raspberry будет запускать фронтенд-приложение на разных IP, я решил разрешить все источники в переменных CORS в Djando 'settings.py' вместо статического IP, который я использую сейчас при разработке по SSH.

Проблема:

После того, как я пытаюсь изменить 'CORS_ALLOW_ALL_ALL_ORIGINS' на 'True', моя система продолжает получать запросы к бэкенду, но даже при ответе 200 HTTP я не получаю аутентификацию во фронтенде.

Я пробовал это в основном на функциональности Login, где сначала я делаю POST запрос для входа, который возвращает 200 HTTP ответ, но второй запрос, который загружает пользователя, никогда не выполняется.

Журнал запросов API бэкенда (неправильный случай / НЕ ожидаемое поведение):

backend_1 | [18/May/2022 01:20:02] "POST /auth/jwt/create/ HTTP/1.1" 200 438

Системные изображения и состояния срабатывают во фронтенд-приложении (неправильный случай / НЕ ожидаемое поведение)

Но если я разрешаю только статический IP в переменной 'CORS_ALLOWED_ORIGINS = []', оба запроса работают как надо и я прохожу аутентификацию.

Журнал запросов API бэкенда (успешный случай / ожидаемое поведение):

backend_1 | [18/May/2022 01:05:20] "POST /auth/jwt/create/ HTTP/1.1" 200 438

backend_1 | [18/May/2022 01:05:20] "GET /auth/users/me/ HTTP/1.1" 200 70

Образы и состояния системы, вызванные во внешнем приложении (успешный случай / ожидаемое поведение)

Честно говоря, я не знаю, где проблема, я проверил рабочий процесс так много раз и не могу найти ошибку. Это может быть что-то связанное с CORS, это может быть что-то связанное с тем, как я делаю запросы с Axios или, возможно, как я пытаюсь получить JWT из локального хранилища.

Теперь я прикреплю основные файлы, которые включены в этот рабочий процесс:

settings.py (Это скрипт python, но не пытайтесь его запустить, потому что он ничего не сделает)

auth.js (/actions)

auth.js (/reducers)

import {
    LOGIN_SUCCESS,
    LOGIN_FAIL,
    SIGNUP_SUCCESS,
    SIGNUP_FAIL,
    ACTIVATION_SUCCESS,
    ACTIVATION_FAIL,
    USER_LOADED_SUCCESS,
    USER_LOADED_FAIL,
    AUTHENTICATED_SUCCESS,
    AUTHENTICATED_FAIL,
    PASSWORD_RESET_SUCCESS,
    PASSWORD_RESET_FAIL,
    PASSWORD_RESET_CONFIRM_SUCCESS,
    PASSWORD_RESET_CONFIRM_FAIL,
    LOGOUT
} from '../actions/types';

const initialState = {
    access: localStorage.getItem('access'),
    refresh: localStorage.getItem('refresh'),
    isAuthenticated: null,
    user: null
};

export default function(state = initialState, action) {
    const { type, payload } = action;

    switch(type) {

        case AUTHENTICATED_SUCCESS:
            return {
                ...state,
                isAuthenticated: true
            }

        case LOGIN_SUCCESS:
            localStorage.setItem('access', payload.access);
            return {
                ...state,
                isAuthenticated: true,
                access: payload.access,
                refresh: payload.refresh
            }

        case SIGNUP_SUCCESS:
            return {
                ...state,
                isAuthenticated: false
            }

        case USER_LOADED_SUCCESS:
            return {
                ...state,
                user: payload
            }

        case AUTHENTICATED_FAIL:
            return {
                ...state,
                isAuthenticated: false
            }
            
        case USER_LOADED_FAIL:
            return {
                ...state,
                user: null
            }
        
        case LOGIN_FAIL:
        case SIGNUP_FAIL:
        case LOGOUT:
            localStorage.removeItem('access');
            localStorage.removeItem('refresh');
            return {
                ...state,
                access: null,
                refresh: null,
                isAuthenticated: false,
                user: null
            }
            
        // This is just to check that the correct type is being dispatched when doing the action with the tool ReduxDevTools
        case PASSWORD_RESET_SUCCESS:
        case PASSWORD_RESET_FAIL:
        case PASSWORD_RESET_CONFIRM_SUCCESS:
        case PASSWORD_RESET_CONFIRM_FAIL:
        case ACTIVATION_SUCCESS:
        case ACTIVATION_FAIL:
            return {
                ...state
            }

        default:
            return state
    }
};

Если кто-то может проверить мою проблему и помочь мне, я буду очень признателен, так как это моя дипломная работа и я уже потерял много времени с этой проблемой, спасибо всем, кто читает это.

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