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

使用Express作为后端。 8080端口

目录如下：

因此，我正在运行两个项目，两个指挥官，一个用于前沿，第二个用于后端。 node app.js用于后端(8080)，ng serve用于前端(4200)。

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

如何从前端向后端发出请求并获取该字符串？我不想知道我应该怎么使用Angular2，因为那不是重点。我在问，我应该使用什么技术才能在不同端口上连接这两个(前端和后端)侧。如果我只运行它们并从前端发出请求，则会收到一条错误消息，因为它找不到/hello网址。

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

绝对网址

如果要访问其他(快速)应用程序上的hello路由，则需要通过引用http://localhost:8080/hello显式指定。

科尔斯

通过这种方式，可以定位正确的应用程序，但是您可能会遇到CORS问题，因为浏览器将阻止从localhost:4200获取的javascript代码访问localhost:8080处的服务器。这是您浏览器的安全功能。因此，如果您想允许4200处的代码访问8080处的后端，则您的后端可以将这个所谓的来源白名单。有关详细信息，请参见http://enable-cors.org/以及可以用于在后端支持cors的相应的快速中间件(https://www.npmjs.com/package/cors)。

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

代理您的后端

我认为

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

为此，您需要配置您的angular dev服务器以代理请求。有关如何执行此操作的详细信息，请参阅https://github.com/angular/angular-cli#proxy-to-backend上的文档。投入生产时，您可以通过配置网络服务器来完成此操作，例如nginx代理请求。