- Создан frontend/src/lib/api.ts с 43 методами для всех API endpoint'ов - Создан frontend/src/lib/permissions.ts для проверки прав доступа - Исправлен URL в getChatMessagesAround: /messages/around/ → /messages-around/ - Исправлен параметр: message_id → around_id - Восстановлен backend из ветки master для стабильности - Удалены конфликтующие файлы Pages Router (src/pages, App.tsx, providers) - Оставлена только чистая структура Next.js App Router - Добавлена документация по миграции API v2
5.2 KiB
5.2 KiB
Настройка Django Backend для работы с React Frontend
⚡ Быстрая установка CORS
1. Установка пакета
cd backend
.venv/Scripts/pip install django-cors-headers
2. Добавить в requirements.txt
echo django-cors-headers >> requirements.txt
3. Настройка settings.py
Добавьте изменения в backend/eusrr_backend/settings.py:
INSTALLED_APPS = [
"daphne",
"channels",
"corsheaders", # ← ДОБАВИТЬ ЭТО
"django.contrib.admin",
# ... остальное
]
MIDDLEWARE = [
"django.middleware.security.SecurityMiddleware",
"corsheaders.middleware.CorsMiddleware", # ← ДОБАВИТЬ ЭТО (второй строкой!)
"django.contrib.sessions.middleware.SessionMiddleware",
"django.middleware.common.CommonMiddleware",
# ... остальное
]
# В конец файла добавить:
# -----------------------------------------------------------------------------
# CORS SETTINGS (для React frontend)
# -----------------------------------------------------------------------------
CORS_ALLOWED_ORIGINS = [
"http://localhost:5173", # Vite dev server
"http://127.0.0.1:5173",
]
# Для продакшена добавить ваш домен:
# CORS_ALLOWED_ORIGINS += ["https://your-domain.com"]
# Разрешить credentials (cookies, auth headers)
CORS_ALLOW_CREDENTIALS = True
# Разрешенные headers
CORS_ALLOW_HEADERS = [
"accept",
"accept-encoding",
"authorization",
"content-type",
"dnt",
"origin",
"user-agent",
"x-csrftoken",
"x-requested-with",
]
4. Перезапустить Django сервер
.venv/Scripts/python manage.py runserver 8000
📡 Проверка работы CORS
Test 1: Проверка из браузера
Откройте консоль в DevTools и выполните:
fetch('http://localhost:8000/api/v1/employees/')
.then(res => res.json())
.then(data => console.log('Success:', data))
.catch(err => console.error('Error:', err));
Если нет ошибок CORS - всё работает!
Test 2: Проверка через curl
curl -H "Origin: http://localhost:5173" \
-H "Access-Control-Request-Method: GET" \
-H "Access-Control-Request-Headers: X-Requested-With" \
-X OPTIONS \
--verbose \
http://localhost:8000/api/v1/employees/ 2>&1 | grep -i "< access-control"
Должны увидеть:
< access-control-allow-origin: http://localhost:5173
< access-control-allow-credentials: true
🔐 Настройка JWT авторизации
Ваша текущая настройка JWT уже работает через PhoneOrEmailTokenObtainPairView.
Frontend будет использовать:
- Login:
POST /api/auth/token/→ получить access + refresh - Refresh:
POST /api/auth/token/refresh/→ обновить токен
Проверьте что endpoint работает:
curl -X POST http://localhost:8000/api/auth/token/ \
-H "Content-Type: application/json" \
-d '{"email": "your@email.com", "password": "yourpassword"}'
Ответ должен быть:
{
"access": "eyJ0eXAiOiJKV1QiLCJh...",
"refresh": "eyJ0eXAiOiJKV1QiLCJh..."
}
🚀 Запуск обоих серверов
Terminal 1: Django Backend
cd backend
.venv/Scripts/python manage.py runserver 8000
Terminal 2: React Frontend
cd frontend
npm run dev
Откройте: http://localhost:5173
❗ Возможные проблемы
Ошибка: "CORS policy: No 'Access-Control-Allow-Origin' header"
Решение:
- Проверьте что
corsheadersустановлен:.venv/Scripts/pip list | grep cors - Убедитесь что
CorsMiddlewareдобавлен ПЕРЕДCommonMiddleware - Проверьте что
http://localhost:5173вCORS_ALLOWED_ORIGINS - Перезапустите Django сервер
Ошибка: "django.core.exceptions.ImproperlyConfigured: 'corsheaders' is not a registered tag library"
Решение:
.venv/Scripts/pip uninstall django-cors-headers
.venv/Scripts/pip install django-cors-headers
Авторизация не работает (401 Unauthorized)
Проверьте:
- Токен правильно сохраняется:
localStorage.getItem('eusrr-auth-token') - Токен отправляется в header:
Authorization: Bearer <token> - Токен не истек (срок жизни настроен в
settings.py)
📝 Дополнительно
Для production добавьте:
# settings.py
if not DEBUG:
CORS_ALLOWED_ORIGINS = [
"https://your-production-domain.com",
]
# Отключить CORS для всех:
CORS_ALLOW_ALL_ORIGINS = False
Для WebSocket (чаты) добавьте:
# settings.py
CORS_ALLOW_HEADERS += [
"sec-websocket-key",
"sec-websocket-version",
"sec-websocket-extensions",
]
✅ Готово!
Теперь можно запускать frontend и backend вместе.