Что такое кросс-доменный запрос?

Что такое кросс-доменный запрос (CORS)?

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

Почему это важно?

Веб изначально следует правилу ограничения домена (Same-Origin Policy, SOP), которое запрещает скриптам с одного домена взаимодействовать с ресурсами другого домена без явного разрешения. Это предотвращает атаки, например, CSRF (Cross-Site Request Forgery) или утечку данных. Однако современные веб-приложения часто используют API с разных доменов, и CORS позволяет безопасно обходить это ограничение.

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

Когда браузер отправляет кросс-доменный запрос (например, через XMLHttpRequest или fetch), он добавляет специальные заголовки и проверяет ответ сервера. Процесс включает:

1. Предварительный запрос (Preflight Request) — для «непростых» запросов (например, с нестандартными методами или заголовками) браузер сначала отправляет запрос OPTIONS для проверки разрешений.
2. Основной запрос — если сервер одобряет предварительный запрос, отправляется фактический запрос с данными.

Пример предварительного запроса:

OPTIONS /api/data HTTP/1.1
Origin: https://myapp.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type

Сервер должен ответить с заголовками CORS:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

Ключевые заголовки CORS

• Access-Control-Allow-Origin — указывает, какие домены могут получить доступ к ресурсу. Значение * разрешает всем доменам, но это не рекомендуется для запросов с учётными данными.
• Access-Control-Allow-Methods — перечисляет разрешённые HTTP-методы.
• Access-Control-Allow-Headers — указывает разрешённые заголовки в запросе.
• Access-Control-Allow-Credentials — если true, разрешает отправку cookies и авторизационных данных.
• Access-Control-Max-Age — определяет, как долго результаты предварительного запроса могут кэшироваться.

Пример реализации на сервере

На сервере (например, Node.js/Express) нужно настроить CORS с помощью middleware:

const express = require('express');
const cors = require('cors');
const app = express();

// Настройка CORS
app.use(cors({
  origin: 'https://myapp.com',
  methods: ['GET', 'POST', 'PUT'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true
}));

app.get('/api/data', (req, res) => {
  res.json({ message: 'Данные доступны с другого домена!' });
});

app.listen(3000, () => console.log('Сервер запущен'));

Распространённые проблемы и решения

• Ошибка CORS в браузере — часто возникает из-за отсутствия заголовков Access-Control-Allow-Origin на сервере. Решение: правильно настроить сервер.
• Запросы с учётными данными — если запрос включает cookies, сервер должен установить Access-Control-Allow-Credentials: true и указать конкретный origin вместо *.
• Кэширование предварительных запросов — использование Access-Control-Max-Age уменьшает количество лишних запросов OPTIONS.
• Простой vs. непростой запрос — простые запросы (GET, POST с стандартными заголовками) не требуют предварительного запроса.

Заключение

Кросс-доменный запрос — это не «уязвимость», а контролируемый механизм для безопасного взаимодействия между разными источниками. Понимание CORS критически важно для разработки современных веб-приложений, особенно в архитектурах с микросервисами или отдельными API. Игнорирование настройки CORS приведёт к ошибкам в браузере, поэтому разработчики должны правильно конфигурировать серверы и понимать, как управлять политиками доступа.