Очень часто меня "душат" в разных чатах вопросами:

— А расскажи, зачем вы на собесах в Premier.one спрашиваете НЕ фронтовые вещи?
— А чем middle от senior'a отличается?
— Да ващет я senior mega giga ultra 4k frontend developer во всех банках страны, а ты говоришь что мне нужно значить nginx. Ты дурак?

И вот, буквально вчера, случился интересный "senior moment" в одном из чатов.

Запрос парня в чате выглядит следующим образом:

есть тут кто настраивал nginx на react next проекте?
запрос проксирую на бэк, но почему-то отдает 404 ошибку
вроде ничего сложного, стандартный конфиг, прописал location, с апи на него шлю запрос
советы гпт никак не помогают(

Разберём чуть-чуть запрос на составляющие:
Есть web приложение, которое шлёт какой-то http запрос, который на уровне nginx'a должен быть направлен в конкретный бэкенд, но вместо 200 ответа приходит 404.

Проблемный кусочек nginx'a выглядит так*:

location /proxy-api/ {
      proxy_pass https://site-backend.ru/api/v1/;
      proxy_set_header Host $host;
 }

*То есть ожидается что запрос site-frontend.ru/proxy-api/{api} уйдёт на site-backend.ru/api/v1/{api}

Отдельный сделаю акцент на том что "гпм никак не помогают". Специально для тех кто кричит что нас всех заменит ИИ. Научитесь сначала получать ответы на свои вопросы (а для этого их нужно на 90% правильно формулировать и, вероятно, в момент формулировки вы уже пишите ответ на задаваемый вопрос)

Увидев что в чате начали накидывать плохие советы, решил помочь. Я проповедую для своих студентов подход "отключай голову и включай дебаг".

Тут логика такая же:
Сначала нам нужно проверить что мы попадаем в указанный location.
Если мы туда попадаем — включаем голову и смотрим на детали.

Заменив правило proxy_pass на просто return 200 — проверяем попадаем ли мы туда? Попадаем. Хорошо.

location /proxy-api/ {
    return 200 "Matched medical-card-api location\n";
}

Включаем голову. 404 на бэкенде говорит нам о том что у нас неправильный URL запроса и у них нет никакой обработки этого пути. Но ведь мы через postman проверили напрямую, без proxy_pass и ответ 200. Значит мы где-то меняем путь на уровне nginx'а.

Решение лежало на поверхности:

proxy_set_header Host $host;

В правиле была установка заголовка Host на $host, а это переменная nginx'a, которая подставляет домен источника запроса, в нашем примере site-frontend.ru.

Ну и абсолютно логично, что когда на бэкенде роутинг обрабатывает путь site-frontend.ru/api/v1/{api}, то там ничего нет, потому что host бэкенда это site-backend.ru

Явное указание нужного Host заголовка решило проблему.

proxy_set_header Host site-backend.ru;

Послесловием выступит сакральная мысль, которую я пытаюсь донести до всех ITшников:
Нельзя "зацикливаться" только на своей сфере, будь то frontend, backend или QA. Изучайте, интересуйтесь тем с чем взаимодействуете каждый день. От дизайна до DevOps'a. Это сделаем вас, по-настоящему, T-shaped специалистами. Таких на рынке процентов пять. А значит: меньше конкуренция, больше денег, круче условие, быстрее рост.

Путь к СЕО (18+). Подписаться

Другие соц.сети:
📷 Instagram
🎞 YouTube
🚀Менторство для Frontend-разработчиков