Пример настройки CORS для работы с фронтендом

Сегодня мы займемся настройкой CORS (Cross-Origin Resource Sharing) для взаимодействия между FastAPI и фронтенд-приложением, будь то React или Angular. Вы могли столкнуться с таким сценарием: пишете фронтенд на React, запускаете локально на localhost:3000, а API работает на localhost:8000. Вы отправляете запрос, и вместо ответа на вас смотрит строгий браузер со словами: "CORS policy: No 'Access-Control-Allow-Origin' header is present". Ну что ж, не будем паниковать — разберемся, как правильно настроить всё, чтобы браузер был доволен.

---

Шаг 1: Устанавливаем middleware для CORS

FastAPI уже готов к работе с CORS благодаря встроенному middleware. Нам нужно лишь его подключить и настроить. Убедитесь, что у вас установлен FastAPI и Uvicorn. Если нет, установите их командой:

pip install fastapi uvicorn

Теперь приступим к настройке.

---

Шаг 2: Минимальная настройка

Создадим простой пример, где наш API отправляет сообщение "Hello from API". Допустим, у нас есть файл main.py:

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

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

@app.get("/")
async def read_root():
    return {"message": "Hello from API"}

Что здесь происходит:

1. Мы использовали CORSMiddleware, чтобы включить поддержку CORS.
2. allow_origins=["*"] — все источники могут обращаться к нашему API. Это удобно на этапе разработки, но в реальной жизни нужно указать только доверенные домены.
3. allow_methods=["*"] и allow_headers=["*"] разрешают все методы HTTP и заголовки (например, Content-Type).

Запустите приложение командой:

uvicorn main:app --reload

Теперь, если ваш фронтенд отправит запрос, браузер не будет ругаться.

---

Шаг 3: Настройка для конкретных доменов

Реальность такова, что полностью открывать API для всех — плохая идея. Нужно ограничить доступ только к нашему фронтенд-приложению. Например, если фронтенд работает на http://localhost:3000, мы можем настроить CORS следующим образом:

# Разрешаем доступ только для фронтенда на localhost:3000
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],  # Только наш фронтенд
    allow_credentials=True,
    allow_methods=["GET", "POST"],  # Разрешаем только GET и POST
    allow_headers=["Content-Type"],  # Только Content-Type
)

---

Шаг 4: Пример интеграции с Web-приложением

1. Настраиваем фронтенд

Предположим, у нас есть web-приложение. Оно отправляет запрос к нашему API. Например, используем fetch:

async function fetchData() {
  const response = await fetch("http://localhost:8000/", {
    method: "GET",
  });
  const data = await response.json();
  console.log(data);
}

fetchData();

Если вы всё настроили правильно, то в консоли появится:

{ message: "Hello from API" }

Если же CORS настроен неправильно, браузер выдаст ошибку вроде:

Access to fetch at 'http://localhost:8000/' from origin 'http://localhost:3000' has been blocked by CORS policy.

---

Шаг 5: Решение типичных проблем

Проблема 1: Предварительные запросы (Preflight Request)

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

FastAPI с CORSMiddleware уже поддерживает preflight-запросы. Если вы столкнулись с проблемами, проверьте, включены ли соответствующие методы и заголовки в конфигурации:

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_methods=["GET", "POST", "OPTIONS"],  # Включаем OPTIONS для preflight
    allow_headers=["Content-Type"],
)

Проблема 2: Заголовок Access-Control-Allow-Origin отсутствует

Если API не возвращает этот заголовок, убедитесь, что allow_origins настроен в CORSMiddleware. Также проверьте, что заголовок ответа совпадает с тем доменом, с которого пришел запрос.

---

Шаг 6: Производственная среда (продакшен)

Безопасность

1. Не используйте allow_origins=["*"] для продакшена. Указывайте только те домены, которым вы доверяете.
2. Если ваш API работает с приватными данными, отключите allow_credentials=True, чтобы браузеры не отправляли куки или другие учетные данные.

Дополнительный шаг: HTTPS

Даже с правильно настроенным CORS данные могут быть украдены, если передаются по HTTP. Используйте HTTPS в продакшене. FastAPI можно настроить с HTTPS, например, предоставив сертификаты.

---

Шаг 7: Полный пример для React

Вот как будет выглядеть полный пример для работы с React:

FastAPI (main.py):

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# Настройка CORS
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],  # Разрешаем только React-приложения с localhost:3000
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/")
async def read_root():
    return {"message": "Hello from API"}

React:

function App() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    // Отправляем запрос к FastAPI
    fetch("http://localhost:8000/")
      .then((response) => response.json())
      .then((data) => setData(data.message));
  }, []);

  return <div>{data ? data : "Loading..."}</div>;
}

export default App;

Теперь, если вы запустите оба приложения (FastAPI и React), вы увидите на экране "Hello from API".

---

Ключевым моментом здесь является баланс между безопасностью и удобством. Настройка CORS — это обязательный шаг для всех, кто хочет создавать фронтенд и бекенд, работающие в гармонии. Настраивайте CORS с умом, а ваш API станет дружелюбным, но защищенным.