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

Posted 2023-03-07

【中文标题】如何在同一个端口上运行 Node Express 服务器和 Angular？

【英文标题】：How to run Node Express server and Angular on the same port?

【发布时间】：2017-11-04 19:14:12

【问题描述】：

我是 Node 和 Angular 的新手。我需要知道是否可以在同一端口上运行用作后端和 Angular 前端的 Node Express 应用程序。我按照 angular.io 上的 Angular Quickstart 提示创建了一个 Node todo 应用程序，但两者都在不同的端口上运行，这引发了跨域请求被阻止问题的问题。

【问题讨论】：

我建议您不要使用 express 或 node.js 来提供静态内容（包括 AngularJS 应用程序）。

【参考方案1】：

要让 Node.js 在同一端口上为 Angular 应用程序提供服务，您的 Angular 应用程序必须部署在部署静态资源的 Node 目录下。但是在开发模式下，从开发服务器（例如在端口 4200 上，而 Node 服务器在另一个端口上运行，例如8080.

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

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

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

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

Angular 应用中的 HTTP 请求可能如下所示：

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

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

【讨论】：

非常有用！谢谢。

你好 Yakov，我在这里提到了视频教程中的链接youtube.com/watch?v=PFP0oXNNveg。你能检查一下并恢复吗？

我通过制作配置文件添加了上面的代码，当我运行 ng-serve 时，我不断收到以下错误“constructor(_configPath, schema, configJson, fallbacks = [])”

从这里复制粘贴代码：github.com/Farata/angular2typescript/blob/master/Angular4/…

非常好的答案，包括跨源问题的困难解决方案。

【参考方案2】：

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

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

如果您有这样的文件结构并且使用 Node 运行 serve.js，这会起作用：

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

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

正如 Yakov 所提到的，这对于开发来说并不理想，因为它不能与 Angular 开发服务器的自动刷新一起使用。

【讨论】：

这个运行在本地如何部署到azure上？

这是有效的，但这限制了我使用角度通用，因为我需要为 nodejs 提供静态源并通过服务器文件夹运行角度通用。知道如何使用这种方式，但也有角度通用

【参考方案3】：

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

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

这样您可以保持项目隔离。