前端和后端的不同端口。如何提出要求？

Question

使用Angular-CLI作为前端。 4200端口

使用Express作为后端。 8080端口

目录看起来像：

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

所以我正在运行两个项目，两个指挥官，一个用于前端，第二个用于后端。 node app.js用于后端（8080），ng serve用于前端（4200）。

让我们假设我在后端有一个层，它返回一些字符串。

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

如何从前端发送请求到后端并获取该字符串？我不想知道我应该如何使用Angular2，因为这不是重点。我问，我应该使用什么技术来连接不同端口上的这两个（前端和后端）端。如果我只是运行它们并从前端发出请求，我会收到错误，因为它找不到/hello网址。

Answer 1

您对/hello的请求表示运行角应用程序的应用程序内部的绝对路径，因此请求转到http://localhost:4200/hello。您的角度应用程序只是不知道您要定位的快速应用程序。

绝对网址

如果要访问其他（快速）应用程序上的hello路由，则需要通过引用http://localhost:8080/hello来明确指定。

CORS

这样做，正确的应用程序是针对性的，但您可能会遇到CORS问题，因为浏览器会阻止从localhost:4200获取的javascript代码访问localhost:8080的服务器。这是浏览器的安全功能。因此，如果您希望允许4200处的代码在8080访问后端，则您的后端可以将此所谓的来源列入白名单。有关详细信息，请参阅http://enable-cors.org/以及相应的快速中间件，您可以使用它来支持后端的角色（https://www.npmjs.com/package/cors）。

在我看来，使用这种方法有两个缺点。首先，你需要一种方法来告诉你的前端它可以到达后端的绝对URL。这必须是可配置的，因为您需要不同的URL用于开发，登台和生产。然后，您还需要一种方法来管理所有列入白名单的网址，因为生产中的前端将具有与在开发中运行前端时不同的网址。这可能会非常麻烦。

代理你的后端

我认为更好的方法是通过前端应用程序中的proxying后端在您的基础架构中处理此问题。通过代理，您基本上可以告诉您的前端服务器，所有对某个URL的请求都应该传递给另一个应用程序。在您的情况下，这可能意味着，例如，您为路径/api/配置代理以代理localhost:8080上的应用程序。然后，服务器不会尝试在您的前端应用程序中找到/api/hello之类的网址，而是将您的请求转发给localhost:8080/hello。在您的角度应用程序中，您不需要关心后端的URL，然后您可以始终对/api/some-express-route之类的URL进行请求。

为此，您需要配置角度开发服务器以代理请求。有关如何执行此操作的详细信息，请参阅https://github.com/angular/angular-cli#proxy-to-backend处的文档。进入生产阶段时，您可以通过配置Web服务器来完成此操作，例如： nginx代理请求。