Приклад налаштування 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, щоб браузери не надсилали cookie або інші облікові дані.

Додатковий крок: 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 стане дружнім, але захищеним.