Angular / Spring Boot / Azure Ingress - URL 重写

Question

我使用 Angular 作为前端技术，使用 Spring Boot 作为后端，使用 Azure Ingress 作为网络服务器。 我的问题是，当用户刷新站点时，由于 Angular 路由而出现 404 错误。 我想知道这种解决此问题的方法是否是一种好习惯，以及我自己的 AJAX 调用是否会引起任何问题：

@Configuration
class WebApplicationConfig
{
    @Bean
    public EmbeddedServletContainerCustomizer containerCustomizer()
    {
        return container -> {
            container.addErrorPages(new ErrorPage(HttpStatus.NOT_FOUND, "/index.html"));
        };
    }
}

?

编辑

我正在搜索的是针对我的技术堆栈的某种 URL 重写（例如在 Apache 网络服务器上）。 目前，JAR 文件中有一个静态文件夹正在返回我的 Angular 文件。如果请求链接 总是返回 angular 文件（index.html 和依赖项），但是当用户正在处理 URL 更改时（仅在前端），如果他然后 点击站点刷新出现404错误。

例如

http://somehost/some/static/url/

http://somehost/some/static/url/and/angular/route

所以我想知道上面的解决方案是否是一个好的解决方案。或者也许还有其他更好的解决方案？

Answer 1

Angular 独立确定路由，必须管理 404 页面和其他页面的显示。您需要始终为服务器中的所有请求提供 index.html 文件

Answer 2

听起来您的 Angular 应用程序直接由您的 Spring Boot 应用程序提供服务。如果您想坚持使用此解决方案（避免使用单独的 Web 服务器），您将必须确保 Spring Boot 在任何路由下为您的 Angular 应用程序的index.html 提供服务（当然除了那些用于 API 的路由），如 Mixalloff 所述.

这是我在一个项目中的做法：

• 将 Angular 项目作为子项目放入您的 Maven 项目中，例如在 src/main/frontend 中。因此，如果您构建 Angular 应用程序，您将在文件夹 src/main/frontend/dist 中获得其静态资源。
• 使用maven-resources-plugin 仅将src/main/frontend/dist 中生成的index.html 复制到输出目录target/classes/templates。所以最后应该有target/classes/templates/index.html这个文件。
• 使用maven-resources-plugin 将任何其他静态资源（如JavaScript、CSS 等）从src/main/frontend/dist 复制到输出目录target/classes/static。这也是您的文件当前所在的位置。
• 在您的 Spring Boot 应用程序中包含一个廉价的模板引擎，例如使用 spring-boot-starter-mustache 将 Mustache 自动配置为 Spring MVC 的模板引擎。我们将使用为您的 Angular 应用生成的 index.html 作为 Mustache 模板。

• 使用返回任何路径的index 视图名称的方法创建一个Spring 控制器。请注意此处映射到/** 的请求：

  @Controller
  public class IndexPageController {
    @RequestMapping("/**")
    public String index() {
      return "index";
    }
  }
  

返回索引页的通配符方法被Spring MVC自动排在最后，见https://docs.spring.io/spring/docs/current/spring-framework-reference/web.html#mvc-ann-requestmapping-pattern-comparison

因此您仍然可以添加更多映射到更具体路径的控制器，例如/api/v1/whatever.

最后，您的 Spring Boot 应用程序将始终为与更具体的请求映射不匹配的任何路由返回 index.html 文件。

这带来了更多的好处：由于 index.html 被处理为 Mustache 模板，因此它可以在需要时包含服务器端模板标记。