Глава 6.2: Настройки CORS

Время изучения: 30 минут

1. CORS: Что это и зачем нужно?

Как мы выяснили, CORS (Cross-Origin Resource Sharing) — это политика безопасности браузера. Она предотвращает ситуацию, когда вредоносный сайт evil-site.com от вашего имени (используя ваши куки) делает запросы к your-bank.com и ворует данные.

Как это работает?

Frontend (браузер) с домена A хочет получить данные с домена B.
Браузер отправляет на домен B специальный "предварительный" запрос (preflight request) методом OPTIONS, спрашивая: "Эй, домен B, можно ли мне, домену A, сделать к тебе GET-запрос?"
Backend (сервер на домене B) должен ответить специальными HTTP-заголовками, например: Access-Control-Allow-Origin: A.
Если ответ сервера разрешает запрос, браузер отправляет основной GET-запрос. Если нет — блокирует его и выдает ошибку CORS.

💡 Космическая аналогия:

Прежде чем телепортировать капитана на чужую станцию (отправить POST-запрос), корабль (браузер) отправляет дрона (OPTIONS-запрос) с вопросом: "Станция, вы принимаете телепортацию с корабля 'Энтерпрайз'?". Станция (API) отвечает: "Да, прием с 'Энтерпрайза' разрешен" (заголовок Access-Control-Allow-Origin). Только после этого начинается телепортация.

2. Настройка CORS в Laravel (Современный подход для Laravel 11+)

В Laravel 11+ конфигурация CORS стала значительно проще и не требует публикации файла config/cors.php, если вам нужны базовые настройки. Все управляется через файл .env и bootstrap/app.php.

Шаг 1: Настройка через переменные окружения

Откройте ваш файл .env. Laravel по умолчанию уже предоставляет переменные для управления CORS для API.

# .env

# ... другие переменные

# Укажите пути, для которых будет действовать CORS.
# 'api/*' - стандартное значение для всех API-роутов.
CORS_PATHS=api/*

# Укажите разрешенные источники (домены).
# Для разработки укажите адрес вашего фронтенда.
# Можно перечислять через запятую, без пробелов.
CORS_ALLOWED_ORIGINS=http://localhost:5500,http://127.0.0.1:5500

# Другие настройки (обычно можно оставить по умолчанию)
CORS_ALLOWED_METHODS=*
CORS_ALLOWED_HEADERS=*
CORS_EXPOSED_HEADERS=
CORS_MAX_AGE=0
CORS_SUPPORTS_CREDENTIALS=false

Ключевые переменные:

CORS_ALLOWED_ORIGINS: Самая важная переменная. Здесь вы перечисляете домены, с которых разрешены запросы. * разрешает всем, но это

крайне небезопасно для продакшена.

CORS_PATHS: Пути, на которые распространяются эти правила. api/* означает все, что начинается с /api/.

После изменения .env не нужно перезапускать сервер, если вы используете php artisan serve. Изменения подхватятся автоматически.

Шаг 2 (Опционально): Продвинутая настройка в bootstrap/app.php

Если вам нужна более сложная логика (например, разрешать поддомены с помощью паттернов), вам все же придется опубликовать файл конфигурации и настроить middleware. Но для 95% случаев достаточно файла .env.

Команда php artisan install:api автоматически настраивает базовый CORS middleware для API роутов в файле bootstrap/app.php. Выглядит это так:

// bootstrap/app.php
->withMiddleware(function (Middleware $middleware) {
    // Эта строка уже будет добавлена командой install:api
    // Она и включает обработку CORS для всех API-роутов
    $middleware->api(base_path('routes/api.php'));
})

Внутри ->api() Laravel уже использует middleware HandleCors, который читает настройки из вашего .env. Все просто и из коробки.

⚠️ Важно! Не используйте CORS_ALLOWED_ORIGINS='*' на боевом сервере, если ваше API не является полностью публичным. Это открывает потенциальную уязвимость. Всегда перечисляйте конкретные домены вашего фронтенда.

3. Настройка CORS в FastAPI

FastAPI использует концепцию Middleware (промежуточного ПО) для обработки таких сквозных задач, как CORS.

Шаг 1: Откройте главный файл вашего приложения

Это файл, где вы создаете экземпляр FastAPI (обычно main.py).

Шаг 2: Добавьте CORSMiddleware

FastAPI предоставляет готовый middleware для настройки CORS.

# main.py
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware # 1. Импортируем middleware

app = FastAPI(
    title="SpaceAPI",
    description="API для управления планетами в галактике",
    version="1.0.0"
)

# 2. Список разрешенных источников (origins)
origins = [
    "http://localhost:5500",
    "http://127.0.0.1:5500",
    # В продакшене здесь будет домен вашего фронтенда
    # "https://my-awesome-app.com",
]

# 3. Добавляем middleware в приложение
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,  # Разрешаем указанные источники
    allow_credentials=True, # Разрешаем куки (понадобится для аутентификации)
    allow_methods=["*"],    # Разрешаем все методы (GET, POST, etc.)
    allow_headers=["*"],    # Разрешаем все заголовки
)

# ... здесь ваши роутеры и остальной код

Шаг 3: Перезапустите Uvicorn сервер Сервер Uvicorn обычно перезагружается автоматически при изменении кода. Если нет, перезапустите его вручную. Теперь ваш FastAPI-сервер будет корректно отвечать на OPTIONS-запросы от фронтенда.

Квиз для закрепления

🚀 Итог главы:

Вы стали "дипломатом межзвездных коммуникаций"! Ваши API теперь могут безопасно взаимодействовать с внешними приложениями, используя современные и правильные подходы.

✅ Поняли механизм работы CORS и preflight-запросов.
🔧 Настроили CORS для Laravel 11+ через файл .env.
⚙️ Настроили CORS для FastAPI с помощью CORSMiddleware.
🛰️ Успешно установили связь между фронтендом и бэкендом.

Коммуникационный мост построен и защищен. Теперь можно подумать о том, как пускать по этому мосту только "авторизованный персонал".

📌 Проверка:

Основной критерий успеха — отсутствие ошибок CORS в консоли браузера при запросе данных с фронтенда.

На вкладке "Network" (Сеть) в инструментах разработчика вы можете увидеть два запроса к вашему API: первый с методом OPTIONS (статус 200/204) и второй с методом GET (статус 200). Это наглядная демонстрация работы CORS.