如何在同一端口上运行Node Express服务器和Angular？

Question

我是Node和Angular的新手.我需要知道是否可以在同一端口上运行Node Express应用程序作为后端和Angular前端.我在angular.io上遵循Angular Quickstart技巧并创建了一个Node todo应用程序,但两者都运行在不同的端口上,这引发了Cross Origin Request Blocked Issue的问题.

Answer 1

要让Node.js在同一端口上为Angular应用程序提供服务,您的Angular应用程序必须部署在部署静态资源的Node目录下.但是在开发模式下,从开发服务器(例如在端口4200上)服务Angular捆绑包(因此它们在编码时在内存中自动重建)会更高效,而节点服务器在另一个端口上运行,例如8080.

要避免跨源问题,您需要在Angular应用程序中配置一个简单的代理文件,以将所有数据请求重定向到您的节点服务器.例如,在Angular项目的根目录中创建一个文件proxy-conf.json:

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

这会将/apiURL中的所有请求重定向到您的节点服务器,假设它在端口8080上运行.然后使用以下命令启动Angular应用程序:

ng serve --proxy-config proxy-conf.json

Angular App中的HTTP请求如下所示:

http.get('/api/products');

当然,您需要/api/products在节点服务器上为GET请求配置端点.

Answer 2

为了让Angular和Express在同一个端口上运行,我总是通过Express应用程序本身提供我的Angular构建文件.您应该能够告诉Express从Angular构建目录中提供静态内容,如下所示:

app.use(express.static('../accounting-client/dist'));

如果您有这样的文件结构并且正在serve.js使用Node 运行,哪个会工作:

-accounting-server
  -serve.js
-accounting-client
  -dist/*

您可以根据需要通过将Angular构建文件夹配置为您需要的任何位置进行自定义,或使用Grunt/Gulp将文件移动到您喜欢的构建任务文件夹.

正如Yakov所提到的,这不适合开发,因为它不适用于Angular dev服务器的自动刷新.