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

Question

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

使用Express作为后端.8080端口

目录看起来像:

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

所以我正在运行两个项目,两个指挥官,一个用于前端,第二个用于后端.node app.jsfor backend(8080),ng servefor frontent(4200).

假设我在后端有一个返回一些字符串的图层.

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

如何从前端到后端发出请求并获取该字符串？我不想知道我应该如何使用Angular2,因为这不是重点.我问,我应该使用什么技术来连接不同端口上的这两个(前端和后端)端.如果我只是运行它们并从前端发出请求,我将收到一个错误,因为它找不到/hellourl.

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/以及相应的快速中间件,您可以使用它来支持后端的cors(https://www.npmjs.com/package/cors).

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

代理你的后端

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

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