Що таке CORS і як його налаштувати в Express.js?

CORS в Express.js

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

Проблема

Frontend: https://myapp.com
Backend:  https://api.myapp.com  ← інший походження!

Браузер блокує запит, якщо сервер не надсилає заголовки CORS.

Інше походження означає будь-яку різницю в:

Протокол: http проти https
Домен: myapp.com проти api.myapp.com
Порт: 3000 проти 4000

Встановлення пакету cors

bash

npm install cors

Дозволити всі походження (тільки для розробки)

const cors = require('cors');
app.use(cors()); // ⚠️ Дозволяє БУДЬ-ЯКЕ походження — небезпечно для продакшну

Налаштування конкретних походжень

const cors = require('cors');

app.use(cors({
  origin: 'https://myapp.com',        // одне походження
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true,                   // дозволити куки / заголовки авторизації
  maxAge: 86400,                       // кеш попереднього запиту (секунди)
}));

Кілька походжень

const allowedOrigins = [
  'https://myapp.com',
  'https://admin.myapp.com',
  'http://localhost:3000', // локальна розробка
];

app.use(cors({
  origin: (origin, callback) => {
    // дозволити запити без походження (Postman, curl, SSR)
    if (!origin) return callback(null, true);

    if (allowedOrigins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error(`Походження ${origin} не дозволено CORS`));
    }
  },
  credentials: true,
}));

CORS для конкретних маршрутів

// Публічна точка доступу — дозволити всім
app.get('/public', cors(), (req, res) => {
  res.json({ public: true });
});

// Приватна точка доступу — обмежити походження
app.get('/private', cors({ origin: 'https://myapp.com' }), (req, res) => {
  res.json({ private: true });
});

Ручні заголовки CORS (без пакету)

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://myapp.com');
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Allow-Credentials', 'true');

  // Обробка попереднього запиту OPTIONS
  if (req.method === 'OPTIONS') {
    return res.status(200).end();
  }

  next();
});

Браузери надсилають запит OPTIONS перед складними запитами CORS (ті, що містять користувацькі заголовки або не прості методи). Сервер повинен відповісти відповідними заголовками Access-Control-*.

Браузер → OPTIONS /api/users
         Access-Control-Request-Method: POST
         Access-Control-Request-Headers: Authorization

Сервер  → 200 OK
         Access-Control-Allow-Origin: https://myapp.com
         Access-Control-Allow-Methods: POST
         Access-Control-Allow-Headers: Authorization

Пакет cors() обробляє це автоматично.

Підсумок

Завжди налаштовуйте CORS явно в продакшні — ніколи не використовуйте cors() без параметрів. Встановіть credentials: true, коли ваш фронтенд надсилає куки або заголовки Authorization, і вкажіть лише ті походження, яким ви насправді довіряєте.

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

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

Premium

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

Дочитали статтю?

Практика завдань