Nginx CORS Header Generator
Сгенерировать корректные CORS-заголовки для location-блока.
Как это работает
Фронтенд на одном домене стучится к API на другом, браузер честно блокирует запрос с ошибкой про CORS policy в консоли, а какие именно заголовки нужно добавить в nginx location, чтобы это заработало, вспоминается через раз. Nginx cors header generator online собирает готовый блок заголовков по разрешенному домену и списку методов.
Сгенерированный блок включает Access-Control-Allow-Origin с указанным доменом, Access-Control-Allow-Methods с перечислением разрешенных HTTP методов, и отдельную обработку preflight OPTIONS запроса, который браузер отправляет перед основным запросом для проверки, что CORS вообще разрешен сервером.
Полезно применять при разработке SPA, который обращается к API на другом поддомене или порту, при настройке публичного API для внешних интеграторов, или просто когда в консоли браузера появилась знакомая красная ошибка про заблокированный кросс-доменный запрос.
Частые вопросы
Почему отдельно нужно обрабатывать OPTIONS запрос?
Браузер перед некоторыми запросами, особенно с нестандартными заголовками или методами вроде PUT и DELETE, сначала отправляет preflight запрос методом OPTIONS, чтобы проверить, разрешен ли основной запрос, и только потом отправляет сам запрос.
Безопасно ли ставить звездочку вместо конкретного домена в Access-Control-Allow-Origin?
Звездочка разрешает запросы с любого домена, что удобно для полностью публичных API без авторизации через cookie, но небезопасно, если API работает с авторизацией через куки конкретного пользователя, там нужен именно точный домен.
Нужно ли перезапускать nginx после добавления CORS заголовков?
Да, как и после любого изменения конфига, требуется перезагрузка через команду nginx с флагом минус s reload, чтобы новые заголовки начали добавляться к ответам.
Что делать, если CORS заголовки добавлены, а ошибка все равно есть?
Стоит проверить через вкладку Network в devtools, действительно ли заголовки приходят в ответе на OPTIONS запрос, иногда причина в том, что сам backend приложения тоже добавляет свои CORS заголовки, и они конфликтуют с добавленными через nginx.