如何在不同的端口上为我的 http 服务器提供 Angular 应用程序答案

【问题标题】：How to serve Angular app on a different port to my http server如何在不同的端口上为我的 http 服务器提供 Angular 应用程序
【发布时间】：2017-10-16 06:04:35
【问题描述】：

在开发模式下，我使用 Angular2 CLI 的“ng serve”命令在 localhost:4200 上为应用程序提供服务。这很棒，因为对源文件的任何调整都会导致快速重建，并且浏览器会自动重新加载更改。

我的应用程序向 localhost:8080 上运行的 Jetty 服务器上的 RESTful api 发出 http 请求。但是所有请求都以非常无益的方式失败：“例外：状态为 0 的响应为 URL null”。相反，如果我还通过将 Jetty 服务器指向客户端项目的 dist 目录来为 Angular 应用程序提供服务，那么一切正常。通过查找有关类似问题的问题，我推测这可能是跨域请求 (CORS) 问题。

但是，如果我必须从与我的 RESTful api 相同的服务器/端口为客户端应用程序提供服务，我将失去从“ng serve”获得的自动重建/重新加载的优势。 “ng build”速度较慢。

有没有办法解决这个问题？

更新：

正如答案中所确认的，这是一个 CORS 问题。我设法通过使用org.eclipse.jetty.servlets.CrossOriginFilter 在服务器端过滤请求来修复它。但是，我选择使用 ng build -o dist -w 作为答案，因为这解决了我较慢的构建问题，在这种情况下，我很乐意将我的 Jetty 服务器指向 dist 目录中的客户端文件并提供所有服务（客户端和 api) 来自同一个端口。

【问题讨论】：

我相信你只需要设置 CORS。见stackoverflow.com/questions/16037558/…

标签： angular cors

【解决方案1】：

这是一个与 CORS 相关的问题，但要回答您的问题，您可以使用 -p 标志将不同的端口与 ng serve 一起使用：ng serve -p 8080

您还可以在运行 ng build 时使用 -w 标志来“监视”文件更改，这样它就会在更改时更新您指向的 dist 目录。

【讨论】：

也许我试图解决错误的问题。 -w 标志解决了我构建速度较慢的问题，使将我的 Web 服务器指向 dist 目录更具吸引力。虽然我也设法解决了 CORS 问题，但我现在可以选择两种方法。

【解决方案2】：

是的，这是一个 CORS 问题。您的 API 需要在其响应中返回正确的 Access-Control-Allow-Origin 标头。

可以在 http://chariotsolutions.com/blog/post/angular-2-spring-boot-jwt-cors_part1 找到如何使用 Spring Boot 执行此操作的示例

【讨论】：

感谢您的指点。不幸的是，所有示例都非常特定于配置，就我而言，我使用的是：没有 web.xml 的嵌入式 Jetty，以及使用 hk2-to-Guice 桥的 Google Guice 依赖注入。我终于想出了如何使用 Guice 的 ServletModule 以编程方式安装 CrossOriginFilter。