Как проксировать запросы к Api
я frontend разработчик, мне нужно написать приложение на React. По сути это верстка, которая будет рисовать карточки пользователей на основе данных с сервера (ФИО, какая то еще информация по типу есть ли машина, и тд). Но у меня проблема с получением этих самых данных. Есть стороннее API. Например 'http://hotel-otelit.com/transition' - это некая точка входа. Также есть некий login допустим: theuser и password: 12345 И сначала мне нужно получить токен доступа для этого есть: URL: /v3/auth/login HTTP: POST BODY: login: string, password: string
В чем собственно вопрос: запросы к API нужно проксировать по причине CORS политики. Я вообще не найду понятной для себя информации что значит проксировать API и как это сделать. Допустим у меня была бы такая же задача и мне надо было бы получить инфу от известного ресурса json placeholder, и также получить список пользователей, там понятно, что мы копируем url, делаем fetch запрос и далее с помощью метода json() получаем ответ нормальный без каких- либо ошибок. А здесь же я вообще не понимаю как проксировать запрос, читаю что можно написать некий прокси сервер на node.js если я все правильно понял, но опять же, я занимаюсь чистым фронтом (написать простой localhost то по уроку можно), но что с ним делать дальше, как его использовать для обращения из фронтенд к стороннему API мне не понятно. Может знаете в какую сторону копать, и что означает проксировать запросы к API...
Ответы (1 шт):
Когда вы пытаетесь сделать запрос "с фронтенда" куда-то на сервер, браузер ограничивает запросы так, чтобы они могли быть отправлены только на тот же самый ориджин, откуда они шлются. Это и есть CORS (Cross Origin Resource Sharing) - политика, запрещающая слать запросы на "левые" URL. Такое ограничение связано с безопасностью, при желании более детальную инфу найдете сами.
Ориджин - это часть URL до пути запрашиваемого ресурса. Например для https://example.com:8080/my/path ориджином будет https://example.com:8080.
Так вот если у вас есть ваше приложение, которое работает, например, на localhost:8080, то и запросы вы можете отправлять только на localhost:8080, а при попытке отправить запрос на, скажем https://example.com:8080/my/path, запрос будет заблокирован браузером (*).
Что же делать в таком случае? Когда вам нужно с приложения, работающего на localhost:8080 отправить запрос на example.com? В таких случаях используются прокси серверы.
Прокси сервер - это прослойка между вашим приложением и удаленным сервером, куда вы хотите послать запрос. Все, что он делает - это принимает запросы от вашего приложения и перенаправляет их дальше на целевой сервер. После чего получает ответ на этот запрос и отправляет этот ответ обратно клиенту. Зачем так усложнять? Очень просто. Прокси сервер будет работать на localhost:8080, как и ваше приложение. Следовательно, ориджины у них одинаковые, следовательно, отправлять запросы ему с клиента можно.
Прокси серверы обычно никто руками не пишет (в современном мире). Инструменты, используемые для сборки вашего приложения, всегда (?) имеют встроенный прокси сервер, который вам нужно лишь настроить. Если уточните, что у вас используется - Webpack, Vite, или что-то еще, тогда вам смогут конкретнее подсказать, как правильно это все сконфигурировать.
Еще важный момент. Прокси сервер, как правило (лично для меня, пожалуй, в 100% случаев) нужен только для дев окружения. То есть, когда ваш сайт будет задеплоен и станет доступен где-то на удаленном сервере, то по умолчанию его бекнд тоже будет доступен с этого же удаленного сервера. Соответственно, ориджины одинаковые - проксировать ничего не надо.
(*) Тут, однако, есть момент. Вы правильно написали, что если посылать запросы на JSON Placeholder, то все прекрасно работает. Вопрос: почему? Все равботает потому, что если определенным образом настроить сервер, то это позволит определенным фронтендам делать к нему запросы, даже если ориджины сервера и клиента не совпадают. Как это сделать? Во-первых, нужно иметь доступ к серверу. В остальном, информации в интернете более чем достаточно (гуглите CORS headers).
Еще хочу акцентировать внимание на том, что это политика сугубо браузерная. Только браузеры ограничивают подобные взаимодействия. И именно по этому схема с промежуточным сервером работает: сервер (прокси) - это не браузер, и именно поэтому ему абсолютно все равно, куда дальше слать (читай, перенаправлять) запрос.