CORS (Обмін ресурсами між різними джерелами)¶

🌐 Переклад ШІ та людьми

Цей переклад виконано ШІ під керівництвом людей. 🤝

Можливі помилки через неправильне розуміння початкового змісту або неприродні формулювання тощо. 🤖

Ви можете покращити цей переклад, допомігши нам краще спрямовувати AI LLM.

CORS або «Cross-Origin Resource Sharing» є ситуація, коли фронтенд, що працює в браузері, містить JavaScript-код, який взаємодіє з бекендом, розташованим в іншому «джерелі» (origin).

Джерело (Origin)¶

Джерело визначається комбінацією протоколу (http, https), домену (myapp.com, localhost, localhost.tiangolo.com), порту (80, 443, 8080).

Наприклад, такі адреси вважаються різними джерелами:

http://localhost
https://localhost
http://localhost:8080

Навіть якщо вони всі містять localhost, вони мають різні протоколи або порти, що робить їх окремими «джерелами».

Кроки¶

Припустимо, що ваш фронтенд працює в браузері на http://localhost:8080, а його JavaScript намагається відправити запит до бекенду, який працює на http://localhost (Оскільки ми не вказуємо порт, браузер за замовчуванням припускає порт 80).

Потім браузер надішле HTTP-запит OPTIONS до бекенду на порту :80, і якщо бекенд надішле відповідні заголовки, що дозволяють комунікацію з цього іншого джерела (http://localhost:8080), тоді браузер на порту :8080 дозволить JavaScript у фронтенді надіслати свій запит до бекенду на порту :80.

Щоб досягти цього, бекенд на порту :80 повинен мати список «дозволених джерел».

У цьому випадку список має містити http://localhost:8080, щоб фронтенд на порту :8080 працював коректно.

Дикі карти¶

Можна також оголосити список як "*" (дика карта), що означає дозвіл для всіх джерел.

Однак це дозволить лише певні типи комунікації, виключаючи все, що пов'язане з обліковими даними: Cookies, заголовки авторизації, як-от ті, що використовуються з токенами носія, тощо.

Тому для коректної роботи краще явно вказувати дозволені джерела.

Використання `CORSMiddleware`¶

Ви можете налаштувати це у вашому додатку FastAPI за допомогою CORSMiddleware.

Імпортуйте CORSMiddleware.
Створіть список дозволених джерел (у вигляді рядків).
Додайте його як «проміжне програмне забезпечення» у ваш додаток FastAPI.

Також можна вказати, чи дозволяє ваш бекенд:

Облікові дані (заголовки авторизації, Cookies, тощо).
Конкретні HTTP-методи (POST, PUT) або всі за допомогою "*"
Конкретні HTTP-заголовки або всі за допомогою "*".

Python 3.10+

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

app = FastAPI()

origins = [
    "http://localhost.tiangolo.com",
    "https://localhost.tiangolo.com",
    "http://localhost",
    "http://localhost:8080",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


@app.get("/")
async def main():
    return {"message": "Hello World"}

🤓 Other versions and variants

Python 3.9+

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

app = FastAPI()

origins = [
    "http://localhost.tiangolo.com",
    "https://localhost.tiangolo.com",
    "http://localhost",
    "http://localhost:8080",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


@app.get("/")
async def main():
    return {"message": "Hello World"}

Параметри за замовчуванням у реалізації CORSMiddleware є досить обмеженими, тому вам потрібно явно увімкнути конкретні джерела, методи або заголовки, щоб браузерам було дозволено використовувати їх у міждоменному контексті.

Підтримуються такі аргументи:

allow_origins - Список джерел, яким дозволено здійснювати міждоменні запити. Наприклад ['https://example.org', 'https://www.example.org']. Ви можете використовувати ['*'], щоб дозволити будь-яке джерело.
allow_origin_regex - Рядок регулярного виразу для відповідності джерелам, яким дозволено здійснювати міждоменні запити. Наприклад, 'https://.*\.example\.org'.
allow_methods - Список HTTP-методів, дозволених для міждоменних запитів. За замовчуванням ['GET']. Ви можете використовувати ['*'], щоб дозволити всі стандартні методи.
allow_headers - Список HTTP-заголовків запиту, які підтримуються для міждоменних запитів. За замовчуванням []. Ви можете використовувати ['*'], щоб дозволити всі заголовки. Заголовки Accept, Accept-Language, Content-Language і Content-Type завжди дозволені для простих CORS-запитів.
allow_credentials - Визначає, чи повинні підтримуватися cookies для міждоменних запитів. За замовчуванням False.

Жоден із параметрів allow_origins, allow_methods і allow_headers не можна встановлювати як ['*'], якщо allow_credentials встановлено як True. Усі вони мають бути явно вказані.
expose_headers - Вказує, які заголовки відповіді повинні бути доступні для браузера. За замовчуванням [].
max_age - Встановлює максимальний час (у секундах) для кешування CORS-відповідей у браузерах. За замовчуванням 600.

Це проміжне програмне забезпечення обробляє два типи HTTP-запитів...

Попередні CORS-запити¶

Це будь-які OPTIONS - запити, що містять заголовки Origin та Access-Control-Request-Method.

У такому випадку middleware перехопить вхідний запит і відповість відповідними CORS-заголовками, повертаючи або 200, або 400 для інформаційних цілей.

Прості запити¶

Будь-які запити із заголовком Origin. У цьому випадку middleware пропустить запит як звичайний, але додасть відповідні CORS-заголовки у відповідь.

Додаткова інформація¶

Більше про CORS можна дізнатися в документації Mozilla про CORS.

Технічні деталі

Також можна використовувати from starlette.middleware.cors import CORSMiddleware.

FastAPI надає кілька middleware у fastapi.middleware для зручності розробників. Але більшість доступних middleware походять безпосередньо зі Starlette.