Настройка CORS (междоменного доступа) для сайтов в ServBay

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

В этом материале вы узнаете, как с помощью удобного интерфейса ServBay легко включить и настроить CORS для вашего сайта в локальной среде веб-разработки.

Что такое CORS?

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

Зачем разработчикам настраивать CORS?

Если вы создаёте раздельное фронтенд и бэкенд приложение (например, фронтенд располагается на app.servbay.demo, бэкенд API – на api.servbay.demo) либо обращаетесь к стороннему API, ваш браузер заблокирует такие запросы из-за политики одного происхождения. Настройка CORS как раз и сообщает браузеру, что сервер разрешает запросы с вашего клиентского приложения и позволяет корректно выполнять междоменные запросы.

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

При ответе на междоменный запрос сервер возвращает определённые HTTP-заголовки Access-Control-*. Браузер, получив эти заголовки, принимает решение — разрешить или отклонить междоменный запрос по их значениям. Вот основные настраиваемые в ServBay параметры CORS (по сути — соответствующие HTTP-заголовки):

1. Access-Control-Allow-Origin

   • Назначение: Самый важный CORS-заголовок. Определяет, каким источникам (доменам) разрешён доступ к ресурсам.
   • Возможные значения:
     • *: разрешены запросы с любых доменов. Важно: хотя это удобно, в production использовать * не рекомендуется — доступ получают абсолютно все сайты, что не безопасно.
     • https://servbay.demo: разрешены только запросы с этого конкретного источника.
     • https://servbay.demo https://api.servbay.demo: разрешено несколько доменов (разделяются пробелом).
   • Внимание: Если междоменный запрос должен передавать Cookie или другие данные авторизации (то есть, включён Access-Control-Allow-Credentials: true), то Access-Control-Allow-Origin никогда не может быть *. Необходимо указать конкретный источник.

2. Access-Control-Allow-Methods

   • Назначение: Определяет, какие HTTP-методы разрешены для междоменных запросов (например: GET, POST, PUT, DELETE, OPTIONS).
   • Примеры: GET, POST, PUT, DELETE, OPTIONS (разделяются запятыми).
   • Внимание: Для «несложных» запросов (например, для методов PUT или DELETE, либо с кастомными заголовками) браузер предварительно отправляет Preflight-запрос методом OPTIONS. Сервер обязан ответить и включить нужные CORS-заголовки, чтобы браузер разрешил реальный запрос. Обычно, метод OPTIONS стоит включать в разрешённые.

3. Access-Control-Allow-Headers

   • Назначение: Определяет список кастомных (дополнительных) HTTP-заголовков, разрешённых для междоменных запросов.
   • Примеры: Content-Type, Authorization, X-Requested-With (разделяются запятыми).
   • Внимание: Если ваш фронтенд использует дополнительные заголовки (не только стандартные: Accept, Accept-Language, Content-Language, Content-Type c типами application/x-www-form-urlencoded, multipart/form-data или text/plain), то перед основным запросом будет отправлен Preflight-запрос, а разрешённые кастомные заголовки должны быть явно перечислены здесь.

4. Access-Control-Allow-Credentials

   • Назначение: Разрешает или запрещает передавать в междоменных запросах авторизационные данные пользователя — Cookie, клиентский SSL-сертификат, HTTP-авторизацию.
   • Значения: true или false.
   • Внимание: Если включено (true), как указано выше, Access-Control-Allow-Origin нельзя устанавливать в *. А со стороны клиента (в JS-коде) необходимо явно указать передачу данных: например, xhr.withCredentials = true или fetch(url, { credentials: 'include' }).

Включение и настройка CORS в ServBay

ServBay предлагает удобный графический интерфейс для индивидуального управления CORS для каждого сайта. Примените следующие шаги:

1. Откройте ServBay и перейдите к списку сайтов: Запустите приложение ServBay. В левой навигационной панели главного окна выберите раздел "Сайты". Вы увидите перечень всех локально настроенных сайтов.

2. Выберите нужный сайт: В списке сайтов найдите тот, для которого хотите настроить CORS. Кликните по названию сайта — откроется его страница настроек.

3. Найдите и включите CORS: На странице настроек сайта прокрутите центральную область до раздела "CORS". По умолчанию CORS выключен. Активируйте переключатель рядом с этим разделом («Включить/Выключить») — конфигурационные поля ниже станут доступны для заполнения.

4. Настройте Access-Control-Allow-Origin: В поле "Access-Control-Allow-Origin" введите один или несколько источников, которым вы позволяете доступ к этому сайту. Для нескольких источников разделяйте их пробелом. Пример: https://frontend.servbay.demo https://anotherapp.servbay.demo. В production избегайте использования *.

5. Настройте Access-Control-Allow-Methods: В поле "Access-Control-Allow-Methods" укажите список разрешённых HTTP-методов, разделяя их запятыми (например: GET, POST, PUT, DELETE, OPTIONS). Включите нужные вашему приложению методы, обычно также OPTIONS — для поддержки preflight-запросов.

6. Настройте Access-Control-Allow-Headers: В поле "Access-Control-Allow-Headers" введите требуемые дополнительный HTTP-заголовки, тоже через запятую. Пример: Content-Type, Authorization, X-Custom-Header. Указывайте только те заголовки, которые реально используются в вашем приложении.

7. Включите Access-Control-Allow-Credentials (по необходимости): Если требуется разрешить передачу Cookie и других данных авторизации, активируйте слайдер рядом с "Allow-Credentials" (включить/выключить). Обратите внимание: При включенной опции в пункте 4 (Access-Control-Allow-Origin) должно быть указано конкретное происхождение, а не *.

8. Сохраните настройки: После внесения всех изменений обязательно нажмите кнопку "Сохранить" в правом нижнем углу страницы. ServBay сам обновит конфигурацию соответствующего веб-сервера (например, Caddy или Nginx) — вручную перезапускать ничего не нужно.

Пример настройки

Ниже показан пример настройки CORS для сайта "ServBay Demo Website" в интерфейсе ServBay:

По данному примеру настроек:

• Access-Control-Allow-Origin: https://frontend.servbay.demo https://api.servbay.demo
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization
• Allow-Credentials: включено (true)

Это означает: только запросы с доменов https://frontend.servbay.demo и https://api.servbay.demo могут обращаться к ресурсам сайта "ServBay Demo Website". Им разрешено использовать методы GET, POST, PUT, DELETE, OPTIONS, включать заголовки Content-Type и Authorization, а также передавать куки и иные учетные данные.

Важные замечания и лучшие практики

• Безопасность прежде всего: В ходе разработки или тестирования можно временно использовать Access-Control-Allow-Origin: *, но перед публикацией сайта ограничивайте доступ только необходимыми источниками.
• Preflight-запросы: Понимание механизма preflight (метод OPTIONS) критично для отладки CORS. Убедитесь, что ваш сервер (через настройки ServBay) правильно отвечает на preflight-запросы нужными заголовками.
• Кэширование браузера: Иногда браузер кэширует CORS-политику. Если после изменения настроек CORS в ServBay вы всё ещё сталкиваетесь с ошибкой — попробуйте очистить кэш браузера или использовать режим инкогнито.
• CORS на уровне приложения: Некоторые веб-фреймворки (Laravel, Express.js, Spring Boot и др.) позволяют настраивать CORS прямо в коде приложения. Конфигурация через ServBay работает на уровне веб-сервера (Caddy/Nginx) и обычно имеет приоритет. При сложной архитектуре убедитесь, что не возникает конфликтов между уровнями.
• Инструменты отладки: Используйте вкладку "Network" (в Сетях) в инструментах разработчика браузера (обычно клавиша F12), чтобы проверить, какие CORS-заголовки возвращаются сервером и как именно браузер обрабатывает ваши запросы.

Часто задаваемые вопросы (FAQ)

В: Я всё настроил по инструкции, но междоменные запросы по-прежнему не работают. Что делать?

О: Проверьте, пожалуйста, следующее шаг за шагом:

1. Проверьте консоль и вкладку сети: Обычно браузер выводит детали ошибок по CORS в консоль и показывает все заголовки запросов и ответов во вкладке "Сеть". Убедитесь, что сервер возвращает правильные значения для Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers, и они совпадают с параметрами вашего клиента.
2. Проверьте источники: Убедитесь, что значение Access-Control-Allow-Origin (протокол, домен, порт) строго совпадает с источником вашего фронтенда.
3. Методы и заголовки: Проверьте, что нужные HTTP-методы входят в Access-Control-Allow-Methods, а все необходимые кастомные заголовки есть в Access-Control-Allow-Headers.
4. Параметр credentials: Для передачи куки или учетных данных убедитесь, что включён Allow-Credentials и не используется Access-Control-Allow-Origin: *. Также client-код должен быть с настройкой отправки cookies (например, withCredentials = true).
5. Preflight-запросы: При сложных запросах убедитесь, что preflight (OPTIONS) корректно обрабатывается сервером и CORS-заголовки добавлены в ответ.
6. Сохранение в ServBay: После изменений обязательно нажимайте "Сохранить" в настройках ServBay.

В: Можно ли задать одну CORS-политику для всех сайтов в ServBay?

О: В ServBay настройка CORS осуществляется индивидуально для каждого сайта — это гибче и безопаснее. Общей глобальной установки через интерфейс нет, поэтому повторяйте необходимые параметры для каждого сайта отдельно.

В: Как именно ServBay реализует настройку CORS?

О: ServBay "под капотом" использует Caddy или Nginx в роли веб-сервера. Заданные в UI CORS-параметры автоматически превращаются в нужные директивы для Caddyfile или конфигурационных файлов Nginx. ServBay отслеживает эти файлы и перезапускает/перезагружает сервер по мере необходимости — никакого ручного редактирования не требуется!

Итог

С помощью интуитивно понятного графического интерфейса ServBay вы можете быстро и безопасно внедрять нужную CORS-конфигурацию для сайтов в локальной среде разработки и избавляться от всех проблем с междоменным доступом. Грамотно управляя такими ключевыми заголовками как Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers, Access-Control-Allow-Credentials, вы гарантируете безопасность и стабильную работу ваших междоменных запросов. Придерживайтесь приведённых в этом руководстве рекомендаций — это поможет сделать ваш процесс локальной разработки максимально эффективным!