Що таке CORS?

Node.jsJunior~2 хв читання

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. Як це працює (коротко)

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

Перевіряє - "Чи дозволено звертатися до цього origin?"
Якщо потрібних 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 з браузера.

Він потрібен для безпеки, але налаштовується саме на серверній стороні, тому що лише сервер вирішує, кому можна довіряти.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.