Как браузер получает информацию о CORS-правилах?

Как браузер узнает о CORS-правилах

Когда веб-страница пытается сделать запрос к другому домену (кросс-доменный запрос), браузер применяет политику CORS (Cross-Origin Resource Sharing). Браузер не имеет встроенной базы правил CORS — он получает их от сервера, к которому обращается запрос. Это происходит через специальные HTTP-заголовки в ответе сервера.

Процесс получения правил

Браузер отправляет запрос с заголовком Origin, указывающим источник (протокол, домен, порт) текущей страницы. Сервер анализирует этот заголовок и решает, разрешен ли доступ. Если да, он добавляет в ответ заголовок Access-Control-Allow-Origin с тем же значением или звездочкой (*), разрешающей все источники. Браузер проверяет этот заголовок и, если он совпадает с источником страницы, разрешает доступ к данным.

Preflight-запросы

Для запросов, которые могут изменить данные (например, методы PUT, DELETE, или с нестандартными заголовками), браузер сначала отправляет предварительный OPTIONS-запрос (preflight). Этот запрос содержит заголовки Access-Control-Request-Method и Access-Control-Request-Headers. Сервер отвечает заголовками Access-Control-Allow-Methods, Access-Control-Allow-Headers и Access-Control-Max-Age, указывая разрешенные методы, заголовки и время кэширования правил. Только после успешного preflight браузер отправляет основной запрос.

Пример кода

// Пример серверного ответа на Express.js
app.get('/data', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'https://example.com');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  res.json({ message: 'Доступ разрешен' });
});

// Preflight-обработчик
app.options('/data', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'https://example.com');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  res.setHeader('Access-Control-Max-Age', 86400); // 24 часа
  res.sendStatus(204);
});

Вывод

CORS — это механизм безопасности браузера, который полагается на серверные заголовки для разрешения кросс-доменных запросов. Понимание этого процесса необходимо для настройки API и предотвращения ошибок доступа в веб-приложениях.