创建 Angular/React 应用程序时的 .Net localhost 服务器

Question

我正在使用 VS2017/2019 和 .NET Core 2.1 创建 Angular 或 React 应用程序。 Angular-CLI 或 create-react-app 用于设置所有内容。 以下所有内容都与开发阶段有关：

当我们构建 .NET 项目时，会启动一个 IIS express 服务器来容纳我们的应用程序，我们将其命名为 localhost:19500。

在启动前端部分（Angular 或 React）的同时，Webpack Dev server 也会启动，它将前端编译的代码容纳在 Webpack 创建的包中；我们可以通过检查（通过 Chrome 开发工具）index.html 看到，其中包含这些捆绑包。要完全理解，这些捆绑包实际上并不位于任何地方；它们被加载到内存中，并且可以通过 Webpack Dev Server 访问。如果我们独立运行前端应用程序，我们可以通过 localhost:4200 (Angular) 或 localhost:3000 (React) 访问这个 Dev 服务器。所以，我的问题是：

我上面的分析正确吗？如果我们启动 IIS 服务器，是否有任何 Webpack Dev Server 服务于前端或前者服务于前端包？

如果有一个 Webpack 开发服务器，那么我们有两个服务器，我们应该解决 CORS 问题。如果没有，IIS 如何处理Hot Module Replacement(HMR) 之类的问题？中间件UseAngularCliServer的具体作用是什么？

Answer 1

根据您在我的answer 下的评论，我猜您误解了 CORS 的概念。引用自MDN：

跨域资源共享 (CORS) 是一种机制，它使用额外的 HTTP 标头来告诉浏览器让在一个来源运行的 Web 应用程序可以访问来自不同来源的选定资源。

CORS 用于控制浏览器（或类似浏览器的客户端，例如Electron）的行为。

---

在这种情况下，浏览器对 Webpack Dev 服务器一无所知，因此根本不会出现 NO CORS 问题：

+-------+          +------+               +--------+
|       |          |      |               |        |
|       |          |      |               |        |
|       +---------->      |               |        |
|       |  Request |      +--------------->        |
|       |          |      |               | Kestrel|
|Browser|          | IIS  | Reverse Proxy |        |
|       |Response  |      |               |        |
|       <----------+      <---------------+        |
|       |          |      |               |                   +-------------+
|       |          |      |               |  For Spa Requests:|             |
|       |          |      |               |  -----------------> Webpack Dev |
|       |          |      |               |        |  Proxy   |  Server     |
|       |          |      |               |        <----------+             |
+-------+          -------+               +--------+          +-------------+

1. 浏览器只与 IIS 对话。然后IIS 将请求代理到您的 ASP.NET Core Kestrel 服务器（因为您使用的是ASP.NET Core 2.1，我假设它在out-of-process mode 中运行）。
2. 请注意将请求发送到 Webpack Dev Server 的是您的 Kestrel 服务器。您的Kestrel 在开发环境中充当代理并将相关请求转发到 Webpack Dev Server。

如您所见，浏览器将所有流量发送到IIS，并从IIS 获取所有响应。浏览器只知道一台服务器，即 IIS。

此外，IIS 不知道 HMR。当开发者访问此 SPA 页面时，您的浏览器和IIS 之间会建立一个WebSocket 连接。 IIS 只是将其转发给Kestrel。然后Kestrel 将其转发给您的Webpack Dev Server。当开发者更改SPA的源代码时，文件watcher会通知浏览器动态重新加载。

---

[编辑]： 回答你的问题

是否可以找到启动 Webpack Dev Server 的端口？本地主机：xxxx

此端口是在运行时动态计算的。 ASP.NET Core 不会公开 API 供开发人员访问它。但是作为了解端口号的walkaround，您可以在您的log 信息中找到它。

例如，我正在使用 VS Code 调试 App：