Введение и проблематика

Представьте: ваш фронтенд на https://myapp.com пытается получить данные с API https://api.example.com. Браузер блокирует запрос с ошибкой CORS. Почему это происходит и зачем нужна такая защита?

Какую проблему решает CORS?

CORS позволяет серверам контролировать, какие сайты могут обращаться к их ресурсам. Это баланс между:

• Безопасностью — защита от несанкционированного доступа
• Функциональностью — возможность легитимных кросс-доменных запросов

Базовая теория

Same-Origin Policy (SOP)

Same-Origin Policy — это фундаментальная политика безопасности браузера, которая запрещает скриптам на одной странице получать данные с другого «источника» (origin).

Origin состоит из трёх частей:

https://example.com:443
  │        │        │
  │        │        └── Порт
  │        └── Домен
  └── Протокол (схема)

Зачем нужен SOP?

Без SOP вредоносный сайт мог бы:

Что такое CORS?

CORS (Cross-Origin Resource Sharing) — это механизм, позволяющий серверам указывать, каким источникам разрешён доступ к их ресурсам.

Как работает CORS

Простые запросы

«Простые» запросы отправляются сразу без предварительной проверки:

Условия простого запроса:

• Методы: GET, HEAD, POST
• Заголовки: только «безопасные» (Accept, Content-Type и др.)
• Content-Type: только text/plain, multipart/form-data, application/x-www-form-urlencoded

// Простой запрос
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

Сервер отвечает с заголовком:

Access-Control-Allow-Origin: https://myapp.com

Preflight-запросы

Для «непростых» запросов браузер сначала отправляет preflight-запрос (OPTIONS):

Когда нужен preflight:

• Методы: PUT, DELETE, PATCH
• Кастомные заголовки: Authorization, X-Custom-Header
• Content-Type: application/json

Практические примеры

Пример ошибки CORS

// frontend.com
fetch('https://api.example.com/data')
  .then(res => res.json())
  .catch(err => console.error(err));

Ошибка в консоли:

Access to fetch at 'https://api.example.com/data' from origin
'https://frontend.com' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present.

Решение на сервере (Node.js/Express)

const express = require('express');
const app = express();
 
// Разрешить всем (НЕ для продакшена!)
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

Основные CORS-заголовки

Пограничные кейсы

Cookies и credentials

Для отправки cookies в кросс-доменных запросах нужно:

На клиенте:

fetch('https://api.example.com/data', {
  credentials: 'include' // Отправлять cookies
});

На сервере:

Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Credentials: true

Несколько разрешённых origins

const allowedOrigins = ['https://app1.com', 'https://app2.com'];
 
app.use((req, res, next) => {
  const origin = req.headers.origin;
  if (allowedOrigins.includes(origin)) {
    res.header('Access-Control-Allow-Origin', origin);
  }
  next();
});

Плюсы и минусы

Вопросы интервьюера

Q: Что такое CORS и зачем он нужен?

CORS — механизм, позволяющий серверам контролировать доступ к ресурсам с других доменов. Нужен для безопасного обхода Same-Origin Policy.

Q: CORS защищает сервер или клиент?

CORS защищает пользователя браузера от вредоносных сайтов. Сервер может обрабатывать запросы от любого источника — CORS работает только в браузере.

Q: Можно ли обойти CORS?

На клиенте — нельзя (это безопасность браузера). Можно использовать прокси-сервер, который добавит нужные заголовки.

Q: Что такое preflight-запрос?

Это предварительный OPTIONS-запрос, который браузер отправляет перед «непростыми» запросами для проверки разрешений.

Источники

• MDN: CORS
• MDN: Same-Origin Policy
• web.dev: Cross-Origin Resource Sharing