Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке CORS?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 1. Що таке CORS

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

> Простіше кажучи: **CORS вирішує, кому дозволено робити AJAX-запити до вашого API.**

## 2. Що таке "origin" (джерело)

"Origin" - це **унікальна комбінація** трьох параметрів:

```javascript
<scheme>://<domain>:<port>
```

Наприклад:

| URL | Origin |
|---|---|
| https://myshop.com | https://myshop.com |
| https://api.myshop.com | інший origin (інший піддомен) |
| http://myshop.com | інший origin (інша схема - HTTP, не HTTPS) |
| https://myshop.com:4000 | інший origin (інший порт) |

Якщо сторінка завантажена з одного origin,
вона **не може** за замовчуванням звертатися до ресурсів іншого origin через JS.

## 3. Навіщо це потрібно

CORS - це захист від **CSRF** та інших атак.
Без нього сайт `evil.com` міг би, наприклад, непомітно надсилати AJAX-запити до `bank.com` від імені користувача,
у якого вже є активна сесія в банку.

## 4. Як це працює (коротко)

Коли браузер робить запит **до іншого домену**, він:

1. Перевіряє - "Чи дозволено звертатися до цього origin?"
2. Якщо потрібних CORS-заголовків немає → блокує відповідь і видає помилку в консолі.

## 5. Основні CORS-заголовки

| Заголовок | Хто надсилає | Що робить |
|---|---|---|
| `Origin` | браузер | повідомляє серверу, з якого сайту йде запит |
| `Access-Control-Allow-Origin` | сервер | відповідає, яким сайтам можна отримати доступ |
| `Access-Control-Allow-Methods` | сервер | вказує, які HTTP-методи дозволені (GET, POST, PUT...) |
| `Access-Control-Allow-Headers` | сервер | вказує, які заголовки можна передавати |
| `Access-Control-Allow-Credentials` | сервер | дозволяє чи забороняє надсилання cookies |

## 6. Приклад запиту й відповіді

**Запит:**

```javascript
GET /data HTTP/1.1
Host: api.example.com
Origin: https://frontend.com
```

**Відповідь:**

```javascript
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://frontend.com
Content-Type: application/json
```

Тепер браузер бачить, що `https://frontend.com` дозволено - і пропускає відповідь до JavaScript-коду.

Якщо цього заголовка немає, у консолі буде помилка:

> "Access to fetch at 'https://api.example.com/data' from origin 'https://frontend.com' has been blocked by CORS policy."

## 7. Preflight-запит (попередній)

Якщо запит "нестандартний" (наприклад, `POST` з JSON-тілом чи кастомними заголовками),
браузер **спершу** робить "preflight" - спеціальний запит `OPTIONS`:

```javascript
OPTIONS /api/data
Origin: https://frontend.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type
```

Сервер має відповісти:

```javascript
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type
```

Лише після цього браузер виконає реальний `POST`.

## 8. Приклад налаштування в Node.js (без фреймворків)

```javascript
import http from 'node:http';

const server = http.createServer((req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*'); // чи конкретний домен
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Authorization');

if (req.method === 'OPTIONS') {
    res.writeHead(204);
    res.end();
    return;
  }

res.end('OK');
});

server.listen(3000);
```

## 9. Типові варіанти конфігурації

| Сценарій | Як налаштувати |
|---|---|
| Публічний API | `Access-Control-Allow-Origin: *` |
| Приватний API (тільки frontend.com) | `Access-Control-Allow-Origin: https://frontend.com` |
| З авторизацією (cookies, JWT) | потрібно вказати `Access-Control-Allow-Credentials: true` і **не можна** ставити `*` |

## 10. Коротко

> **CORS** - це механізм, який дозволяє серверу вказати,
> які зовнішні сайти (origins) можуть робити запити до його API з браузера.
>
> Він потрібен для **безпеки**, але налаштовується саме на **серверній стороні**,
> тому що лише сервер вирішує, кому можна довіряти.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати508 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.