Различные порты для frontend и backend. Как сделать запрос?

использование Angular-CLI в качестве интерфейса. Порт 4200

использование Express в качестве бэкэнда. Порт 8080

каталоги выглядят так:

Application
 - backend
   - ...Express architecture
 - frontend
   -...Angular2 architecture

Итак, я запускаю два проекта, два командира, один для frontent, второй для backend. node app.js для бэкэнда (8080), ng serve для frontent (4200).

предположим, что у меня есть слой в бэкэнде, который возвращает некоторую строку.

app.get('/hello', function(req, res) {
  res.send("Hello!");
}

как я могу сделать запрос от frontend к backend и вам эта струна? Я не хочу знать, как именно я должен использовать Angular2, потому что это не важно. Я спрашиваю, какую технологию я должен использовать, чтобы иметь возможность соединять эти две (переднюю и заднюю) стороны на разных портах. Если я просто запустил их и сделал запрос от frontend, я получу ошибку, потому что он не может найти /hello URL-адрес.

6
angular express port

1 ответов

запрос /hello означает абсолютный путь внутри приложения, выполняющего угловое приложение, поэтому запрос переходит в http://localhost:4200/hello. Ваше угловое приложение просто не знает о экспресс-приложении, которое вы хотите настроить.

абсолютные urls

если вы хотите получить доступ к hello маршрут в другом (экспресс) приложении вам нужно явно указать это, сославшись на http://localhost:8080/hello.

cors

делая это таким образом, правильное приложение предназначено, но вы, скорее всего, столкнетесь с проблемами CORS, потому что браузер предотвратит код javascript, полученный из localhost:4200 для доступа к серверу в localhost:8080. Это функция безопасности Вашего браузера. Поэтому, если вы хотите разрешить коду в 4200 доступ к бэкэнду в 8080, ваш бэкэнд может белый список этого так называемого происхождения. Подробнее см.http://enable-cors.org/ и соответствующее промежуточное ПО express, которое можно использовать для поддержки cors в вашем бэкэнде (https://www.npmjs.com/package/cors).

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

прокси-сервера

лучший подход, на мой взгляд, чтобы справиться с этим в вашей инфраструктуре proxying бэкэнд в frontend приложения. При проксировании вы в основном говорите своему интерфейсному серверу, что все запросы к некоторому url должны быть переданы другому приложению. В вашем случае это может означать, что, например, вы настраиваете прокси-сервер для пути /api/ прокси приложения на localhost:8080. Сервер затем не пытается найти url-адрес, например /api/hello на вашем интерфейсном приложении, но перенаправляет ваш запрос на localhost:8080/hello. В вашем угловом приложении вам не нужно заботиться о url-адресе вашего бэкэнда, и вы всегда можете сделать запрос на url-адрес, например /api/some-express-route.

для этого вам нужно настроить сервер angular dev для прокси-запросов. Подробнее о том, как это сделать, см. В документах по адресуhttps://github.com/angular/angular-cli#proxy-to-backend. При переходе к производству вы можете сделать это, настроив свой веб-сервер, например nginx для прокси-запросов.

19