(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
}
};
Если кто-то может проверить мою проблему и помочь мне, я буду очень признателен, так как это моя дипломная работа и я уже потерял много времени с этой проблемой, спасибо всем, кто читает это.