Отже, що таке CORS? Уявіть, що ваш API — це щось на кшталт елітного клубу. Тільки люди з правильними "ключами" (права доступу) можуть зайти. Без CORS це більше схоже на вечірку вдома в друга, куди може зайти хто завгодно, включно з небажаними гостями з сусідньої вулиці. CORS дозволяє встановити правила, хто може робити запити до вашого API і які запити допустимі.
FastAPI, наш зручний "інструментальний ящик", пропонує просте й гнучке налаштування CORS. Тож давайте розберемося, як захистити ваш API і дозволити доступ тільки "правильним" клієнтам.
Встановлення CORS у проєкті FastAPI
FastAPI містить інтеграцію для керування CORS через вбудовану систему middleware. Middleware у цьому випадку — це свого роду "секретар", який приймає запити і перевіряє їх на відповідність політикам CORS.
Встановлення залежностей
Для налаштування CORS у FastAPI нам потрібна бібліотека fastapi. Ви вже повинні з нею знайомі, тож рухаємося далі!
Переконайтеся, що у вас також встановлений uvicorn, наш сервер для запуску застосунків FastAPI:
pip install fastapi uvicorn
Мінімальна конфігурація CORS
Давайте створимо мінімальний застосунок FastAPI і налаштуємо middleware для підтримки CORS. Почнемо з простого прикладу:
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI()
# Налаштовуємо CORS
app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # Дозволяємо запити з усіх джерел (* означає "всі")
allow_credentials=True, # Дозволяємо відправку cookie
allow_methods=["*"], # Дозволяємо всі HTTP-методи (GET, POST, PUT, DELETE і т.д.)
allow_headers=["*"], # Дозволяємо всі заголовки
)
@app.get("/")
async def read_root():
return {"message": "Hello, World!"}
Збережіть цей файл, запустіть сервер за допомогою uvicorn, і ваш API тепер готовий до приймання крос-доменних запитів:
uvicorn main:app --reload
Цей приклад дозволяє всім відправляти запити до вашого API, що, чесно кажучи, не надто безпечно. Далі навчимося задавати більш жорсткі правила.
Налаштування параметрів CORS
CORS — це не просто Binary Switch (увімкнути/вимкнути). Ви можете налаштувати параметри так, щоб дозволити тільки певні джерела, методи або заголовки.
Дозвіл тільки певних джерел
Припустимо, у вас є фронтенд, який запускається на http://localhost:3000. Ви хочете дозволити тільки цьому домену звертатися до вашого API. Ось як це зробити:
app.add_middleware(
CORSMiddleware,
allow_origins=["http://localhost:3000"], # Дозволяємо тільки це джерело
allow_credentials=True,
allow_methods=["GET", "POST"], # Дозволяємо тільки GET і POST
allow_headers=["*"],
)
Якщо ви хочете додати кілька джерел, передайте їх у вигляді списку:
allow_origins=["http://localhost:3000", "https://my-production-app.com"]
Вітаю! Тепер ваш API доступний тільки "перевіреним" джерелам. Решта отримають доступ лише через сльози і 403 Forbidden.
Обмеження HTTP-методів
Не всі методи повинні бути доступні для міждоменних запитів. Наприклад, ви можете дозволити тільки безпечні методи (GET, OPTIONS).
Приклад налаштування тільки для цих методів:
app.add_middleware(
CORSMiddleware,
allow_origins=["http://localhost:3000"],
allow_credentials=True,
allow_methods=["GET", "OPTIONS"], # Обмеження на методи
allow_headers=["*"],
)
Керування заголовками
Заголовки запитів можуть містити конфіденційну інформацію, тож приймайте їх обережно. Якщо ви хочете дозволити тільки певні заголовки, вкажіть їх явно:
app.add_middleware(
CORSMiddleware,
allow_origins=["http://localhost:3000"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["Content-Type", "Authorization"], # Дозволяємо тільки заголовки Content-Type і Authorization
)
Практичний приклад: API для web-застосунку
Припустимо, у нас є фронтенд-застосунок, який запитує дані у FastAPI-сервера. Реалізуємо безпечну взаємодію.
Налаштуємо сервер FastAPI.
Створіть файл main.py:
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI()
# Дозволяємо доступ тільки фронтенд-застосунку
app.add_middleware(
CORSMiddleware,
allow_origins=["http://localhost:3000"], # Тільки ваш React-frontend
allow_credentials=True,
allow_methods=["GET", "POST"],
allow_headers=["Content-Type"],
)
@app.get("/data")
async def get_data():
return {"message": "This is the data from the API."}
Ось приклад запиту з фронтенду:
async function fetchData() {
const response = await fetch("http://127.0.0.1:8000/data", {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
const data = await response.json();
console.log(data);
}
fetchData();
Тепер сервер відповідає тільки на запити з http://localhost:3000. Якщо хтось інший спробує отримати доступ, він отримає помилку CORS у консолі браузера.
Поширені помилки та їх виправлення
Робота з CORS може бути справжнім головним болем навіть для досвідчених розробників. Ось кілька поширених ситуацій:
Помилка: "CORS policy does not allow access"
Ця помилка виникає, якщо обраний вами домен не включений у allow_origins. Перевірте, який домен відправляє запит, і додайте його.
Помилка: "Preflight request fails"
Якщо ви використовуєте методи, крім GET або POST, браузер відправляє "preflight request" (OPTIONS) для перевірки політики CORS. Переконайтеся, що методу OPTIONS дозволено доступ, додавши його в allow_methods.
Помилка: "Blocked by CORS policy: No 'Access-Control-Allow-Origin' header"
Це трапляється, якщо ваш сервер не налаштований для відправки заголовків CORS. Перевірте вашу конфігурацію middleware.
Налаштування CORS може здатися зайвим ускладненням, але воно допомагає захистити ваш API від неконтрольованого використання. Уявіть, що якийсь зловмисний сайт робить запити від імені користувача, щоб вкрасти його дані. Без CORS ваш сервер видав би доступ зловмиснику. Тож так, CORS — це не просто "зайвий крок", це фундаментальний елемент безпеки веб-застосунків.
FastAPI робить налаштування CORS досить простим і гнучким, щоб впоратися з різними сценаріями. Тепер ви озброєні всіма необхідними знаннями, щоб налаштувати свій API для роботи з фронтендом, зберігаючи при цьому високий рівень безпеки.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ