Настройка CORS (кросс-доменных запросов) для веб-сайта

Что такое CORS?

Кросс-доменные запросы (CORS) — это механизм, основанный на HTTP-заголовках, который позволяет ослабить ограничения браузера на кросс-доменные запросы. Проще говоря, когда веб-страница (например, страница на example.com) пытается запросить ресурсы с другого домена (например, api.example.net), браузер по умолчанию блокирует такой запрос в соответствии с политикой одного источника. CORS позволяет серверу добавлять специфические заголовки в ответ, сообщая браузеру, какие источники могут получать доступ к ресурсам, тем самым безопасно реализуя кросс-доменные запросы.

Почему стоит использовать CORS?

Когда ваше фронтенд-приложение (например, SPA, работающая на app.example.com) нужно получить данные с бэкенд-API (например, работающего на api.example.com), вам, вероятно, потребуется использовать CORS.

Подробное описание параметров CORS

Ниже приведены некоторые распространенные параметры CORS и их назначение:

1. Access-Control-Allow-Origin:

   • Назначение: Указывает, какие источники могут получать доступ к ресурсу.
   • Значения:
     • * — позволяет запросы с любого домена (не рекомендуется для производственной среды, так как небезопасно).
     • https://example.com — разрешает запросы только с https://example.com.
     • https://example.com https://www.example.net — разрешает запросы только с https://example.com и https://www.example.net.
   • Важное примечание: Если запрос содержит заголовок Authorization, Access-Control-Allow-Origin не может быть установлен в *, он должен быть установлен в конкретный домен, иначе кросс-доменный запрос будет неуспешным.

2. Access-Control-Allow-Methods:

   • Назначение: Указывает разрешенные HTTP-методы (например, GET, POST, PUT, DELETE).
   • Значения: Например: GET, POST, PUT, DELETE, OPTIONS.
   • Важное примечание: Если ваш запрос содержит пользовательские заголовки или использует методы PUT или DELETE, вы должны указать метод OPTIONS, иначе браузер сначала отправит предварительный запрос OPTIONS, и если в ответе не будет указан разрешенный метод OPTIONS, ваш запрос будет неуспешным.

3. Access-Control-Allow-Headers:

   • Назначение: Указывает разрешенные пользовательские HTTP-заголовки, используемые клиентом в запросе.
   • Значения: Например: Content-Type, Authorization.
   • Важное примечание: Если ваш запрос содержит пользовательские заголовки, вы должны указать их как разрешенные, иначе браузер заблокирует ваш запрос.

4. Access-Control-Allow-Credentials:

   • Назначение: Разрешить или запретить кросс-доменные запросы с Cookie или HTTP-данными аутентификации.
   • Значения: true или false.
   • Важное примечание: При установке в true, значение Access-Control-Allow-Origin не может быть установлено в *.

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

ServBay предоставляет удобный интерфейс для настройки CORS для вашего сайта, конкретные шаги следующие:

1. Выбор сайта: В навигационной панели слева на главной странице ServBay нажмите на опцию “Сайты”. Выберите сайт, для которого вы хотите настроить CORS из списка сайтов.
2. Переход к настройкам CORS: На странице настройки сайта найдите раздел “CORS”. По умолчанию CORS отключен, вам нужно вручную включить CORS, изменив переключатель с “выключено” на “включено”.
3. Настройка Access-Control-Allow-Origin: В поле ввода Access-Control-Allow-Origin введите разрешенные домены, несколько доменов можно разделить пробелами. Например: https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com.
4. Настройка Access-Control-Allow-Methods: В поле ввода Access-Control-Allow-Methods введите HTTP-методы, которые вы хотите разрешить. Например: GET, POST, PUT, DELETE, OPTIONS.
5. Настройка Access-Control-Allow-Headers: В поле ввода Access-Control-Allow-Headers укажите разрешенные заголовки запроса. Например: Content-Type, Authorization.
6. Включение Allow-Credentials (по желанию): Если вы хотите разрешить кросс-доменные запросы с Cookie или аутентификацией, включите переключатель Allow-Credentials. Обязательно обратите внимание, что если этот параметр включен, значение Access-Control-Allow-Origin не может быть установлено в *.
7. Сохранение настроек: После завершения настройки нажмите кнопку "Сохранить" в правом нижнем углу для применения ваших изменений.

Пример

Согласно приведенному выше скриншоту, CORS для сайта “ServBay Testing” настроен следующим образом:

• Access-Control-Allow-Origin: https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization
• Allow-Credentials: Включено.

Это означает, что запросы из указанных доменов могут получать доступ к ресурсам сайта servbay.new и могут использовать методы GET, POST, PUT, DELETE, OPTIONS, а также могут передавать заголовки Content-Type и Authorization и сведения о Cookie.

Важные моменты

• Безопасность: В производственной среде избегайте использования подстановочного знака * в качестве значения Access-Control-Allow-Origin.
• Кэширование: Браузеры могут кэшировать ответ CORS, поэтому после изменения настроек CORS, возможно, потребуется очистить кэш браузера.
• Настройки кода: В некоторых случаях, помимо настройки CORS на веб-сервере, необходимо также настроить CORS в коде (например, Laravel).
• Сложные сценарии: Для более сложных кросс-доменных сценариев вам может потребоваться комбинировать CORS с другими технологиями, такими как JSONP или прокси-серверы.

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

Надеюсь, этот документ поможет вам лучше понять и использовать возможности CORS в ServBay. Если у вас есть вопросы, не стесняйтесь задавать их.