Что такое разные домены?

Что такое разные домены (разные источники) в веб-разработке?

Разные домены (или разные источники, от англ. Cross-Origin) — это фундаментальное понятие веб-безопасности, описывающее ситуацию, когда веб-приложение, загруженное с одного источника (домена, протокола, порта), пытается получить ресурсы или взаимодействовать с сервером, расположенным на другом источнике. Эта концепция лежит в основе Политики одинакового источника (Same-Origin Policy, SOP) — строгого механизма безопасности браузеров, призванного изолировать потенциально вредоносные сценарии.

Ключевые компоненты источника (Origin)

Источник однозначно определяется тремя компонентами:

1. Протокол (схема): http://, https://, ftp:// и т.д.
2. Домен (хост): example.com, subdomain.example.com, localhost.
3. Порт: :80, :443, :3000. Для протоколов HTTP и HTTPS порты 80 и 443 соответственно являются портами по умолчанию и обычно не указываются.

Примеры разных источников:

• https://site.com и http://site.com → Разные (отличается протокол, HTTPS vs HTTP).
• https://site.com и https://api.site.com → Разные (отличается хост, хотя и часть одного домена).
• https://site.com:3000 и https://site.com → Разные (отличается порт, 3000 vs 443 по умолчанию).
• https://site.com/app и https://site.com/api → Один и тот же (совпадают протокол, хост и порт).

Зачем нужна политика одинакового источника (SOP)?

SOP — это "песочница" браузера. Она блокирует чтение ответов на межсайтовые HTTP-запросы, инициированные скриптами (например, через fetch или XMLHttpRequest). Без этой политики злоумышленник мог бы:

• Украсть вашу сессию с bank.com, открыв вредоносный сайт в соседней вкладке.
• Отправить авторизованные запросы от вашего имени к другому сервису.
• Прочитать конфиденциальные данные с внутренних корпоративных порталов.

Механизм обхода ограничений: CORS

Для реализации современных веб-приложений (SPA, микросервисная архитектура), где фронтенд на app.com обращается к API на api.com, необходим контролируемый способ безопасного взаимодействия. Таким механизмом является CORS (Cross-Origin Resource Sharing).

CORS — это стандарт, позволяющий серверу явно указать, с каких внешних источников ему разрешено принимать запросы. Работает он через специальные HTTP-заголовки.

Как это выглядит на практике:

1. Браузер перед выполнением "непростого" запроса (например, POST с Content-Type: application/json) отправляет предварительный запрос (preflight request) типа OPTIONS на целевой сервер.
2. Сервер в ответе на OPTIONS должен вернуть заголовки, разрешающие кросс-доменные запросы:

   Access-Control-Allow-Origin: https://myfrontendapp.com
   Access-Control-Allow-Methods: GET, POST, PUT, DELETE
   Access-Control-Allow-Headers: Content-Type, Authorization
   

3. Если заголовки с сервера разрешают текущий источник и метод, браузер выполняет основной запрос.

Пример настройки CORS на сервере (Node.js + Express):

const express = require('express');
const cors = require('cors'); // Используем популярный middleware

const app = express();

// Базовая настройка - разрешить запросы только с конкретного домена
app.use(cors({
  origin: 'https://myfrontendapp.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

// Или разрешить запросы со всех доменов (НЕ БЕЗОПАСНО для продакшена!)
// app.use(cors());

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

app.listen(3000);

Другие способы работы с разными доменами

• JSONP (JSON with Padding): Устаревший метод, использующий тег <script> (на который SOP не распространяется). Крайне не рекомендуется из-за рисков безопасности.
• Прокси-сервер: Фронтенд отправляет запросы на свой собственный сервер (одного с ним происхождения), а тот, в свою очередь, перенаправляет их на целевой внешний API. Это полностью обходит CORS на уровне браузера.

  # Пример конфигурации Nginx-прокси
  location /api/ {
      proxy_pass https://external-api.com/;
      proxy_set_header Host $host;
  }
  

Вывод для Frontend Developer

Понимание работы разных доменов, SOP и CORS критически важно. В повседневной работе вы постоянно сталкиваетесь с этим при:

• Интеграции со сторонними API.
• Разделении фронтенда и бэкенда на разные серверы/поддомены.
• Настройке аутентификации/авторизации (токены должны передаваться безопасно).
• Отладке сетевых запросов в DevTools (анализ предварительных запросов и ответов CORS).

Ошибки, связанные с CORS (No 'Access-Control-Allow-Origin' header, Preflight request failed), — одни из самых частых на этапе разработки. Их решение лежит на стыке фронтенда и бэкенда и требует чёткой координации и правильной конфигурации серверной части.