使用Express作为后端. 8080端口
目录看起来像：
Application - backend - ...Express architecture - frontend -...Angular2 architecture
所以我正在运行两个项目,两个指挥官,一个用于前端,第二个用于后端.后端的节点app.js(8080),ng为frontent(4200)服务.
让我们假设我在后端有一个层,它返回一些字符串.
app.get('/hello',function(req,res) {
res.send("Hello!");
}
如何从前端发送请求到后端并获取该字符串？我不想知道我应该如何使用Angular2,因为这不是重点.我问,我应该使用什么技术来连接不同端口上的这两个(前端和后端)端.如果我只是运行它们并从前端发出请求,我将收到一个错误,因为它无法找到/ hello url.
绝对的网址
如果要在其他(快速)应用程序上访问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用于开发,登台和生产.然后,您还需要一种方法来管理所有列入白名单的网址,因为生产中的前端将具有与在开发中运行前端时不同的网址.这可能会非常麻烦.
代理你的后端
在我看来,更好的方法是通过代理前端应用程序中的后端来处理基础架构中的这种情况.通过代理,您基本上可以告诉您的前端服务器,所有对某个URL的请求都应该传递给另一个应用程序.在您的情况下,这可能意味着,例如,您为路径/ api /配置代理以在localhost：8080上代理应用程序.然后服务器不会尝试在您的前端应用程序中找到类似/ api / hello的URL,而是将您的请求转发到localhost：8080 / hello.在您的角度应用程序中,您不需要关心后端的URL,然后您可以随时向/ api / some-express-route等网址发出请求.
为此,您需要配置角度开发服务器以代理请求.有关如何执行此操作的详细信息,请参阅文档于https://github.com/angular/angular-cli#proxy-to-backend.在开始生产时,您可以通过配置Web服务器来完成此操作,例如： Nginx代理请求.