Question

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

Answer 1

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

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

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

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

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

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

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

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

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服务器的自动刷新。

Answer 3

正如spacefozzy所说，你需要从Express项目中访问客户端项目这一事实是正确的。但你仍然可以将你的项目分开。
为此，您可以从Express项目目录中的客户端项目目录创建符号链接：

// while in Express directory
ln -s ~/path/tp/client-side/build name-in-espress-dir

通过这种方式，您可以保持孤立的项目。

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

3 个答案: