Разработка API: Зачем нужен формат CORS (Cross-Origin Resource Sharing) и как настроить разрешенные домены на сервере?
CORS (Cross-Origin Resource Sharing) — это механизм безопасности браузера, который контролирует, каким образом веб-страницы могут запрашивать ресурсы с другого домена, отличного от того, с которого была загружена сама страница. Без CORS браузер блокирует такие запросы по политике Same-Origin Policy (SOP), защищая пользователей от потенциально опасных межсайтовых взаимодействий.
**Зачем нужен CORS?**
Когда фронтенд-приложение (например, React или Vue), работающее на домене `https://myapp.com`, пытается обратиться к API на `https://api.otherdomain.com`, браузер сначала проверяет, разрешает ли сервер такой запрос. Если сервер не возвращает нужные заголовки CORS — запрос блокируется. Это критично для:
— Разделения фронтенда и бэкенда на разных доменах или портах
— Работы с публичными API из браузера
— Микросервисной архитектуры
— Мобильных и SPA-приложений
**Как работает CORS?**
Для «сложных» запросов (PUT, DELETE, запросы с кастомными заголовками) браузер сначала отправляет preflight-запрос методом OPTIONS. Сервер должен ответить заголовками, разрешающими запрос.
Основные заголовки CORS:
— `Access-Control-Allow-Origin` — разрешённые домены (`*` или конкретный домен)
— `Access-Control-Allow-Methods` — разрешённые HTTP-методы
— `Access-Control-Allow-Headers` — разрешённые заголовки запроса
— `Access-Control-Allow-Credentials` — разрешение передачи куки
— `Access-Control-Max-Age` — время кэширования preflight-ответа
**Настройка CORS на сервере**
*Node.js (Express):*
javascript
const cors = require(‘cors’);
app.use(cors({
origin: [‘https://myapp.com’, ‘https://admin.myapp.com’],
methods: [‘GET’, ‘POST’, ‘PUT’, ‘DELETE’],
allowedHeaders: [‘Content-Type’, ‘Authorization’],
credentials: true
}));
*Nginx:*
nginx
add_header ‘Access-Control-Allow-Origin’ ‘https://myapp.com’;
add_header ‘Access-Control-Allow-Methods’ ‘GET, POST, OPTIONS’;
add_header ‘Access-Control-Allow-Headers’ ‘Authorization, Content-Type’;
*Django (Python):*
Используется пакет `django-cors-headers`. В `settings.py`:
python
CORSALLOWED_ORIGINS = [
«https://myapp.com»,
]
**Важные рекомендации:**
— Никогда не используйте `Access-Control-Allow-Origin: *` вместе с `credentials: true` — это запрещено стандартом
— Указывайте конкретные домены вместо wildcard для продакшена
— Обязательно обрабатывайте preflight OPTIONS-запросы
— Ограничивайте разрешённые методы и заголовки только необходимыми
Правильная настройка CORS обеспечивает безопасное взаимодействие между клиентом и сервером, не нарушая политику безопасности браузера.