spring-webflux - 如何使用 html 5 模式和 Spring webflux 处理页面刷新

Question

我正在尝试实现此处描述的技术:use html5 mode with servlets与 webflux。

简而言之，用户需要能够从他们的浏览器刷新页面而不会被重定向到 404 Spring Boot 的白标页面。

上面的教程依赖于使用 servlet 的技术 forward:机制:

@Controller
public class ForwardController {

    @RequestMapping(value = "/**/{[path:[^\\.]*}")
    public String redirect() {
        // Forward to home page so that route is preserved.
        return "forward:/";
    }
} 

但是我使用 webflux 而不是 servlet .这是我尝试使用 WebFilter 所做的尝试:

@Component
public class SpaWebFilter implements WebFilter {

    @Override
    public Mono<Void> filter(ServerWebExchange exchange, WebFilterChain chain) {
        String path = exchange.getRequest().getURI().getPath();
        if (!path.startsWith("/api") && path.matches("[^\\\\.]*")) {
            return chain.filter(
                exchange.mutate().request(exchange.getRequest().mutate().path("/").build()
                ).build());
        }
        return chain.filter(exchange);
    }
}

当用户刷新页面时，这会导致 404 .

编辑 : 让我更详细地描述这个问题:

在浏览器中加载 SPA 后，用户可以使用角度路由链接进行导航。来自 http://localhost:8080/ 说至 http://localhost:8080/user-list (这里 /user-list 是一个角度路由。这个导航与后端没有交互。

现在当用户——还在 /user-list上route - 选择刷新浏览器页面，Spring 将尝试解决 /user-list后端处理程序/路由器函数的路径，这将导致 Spring Boot 提供 404 白标签错误页面。

我想要实现的是 http://localhost:8080/user-list当用户刷新浏览器页面时，页面仍会显示给用户。

编辑 2 :请注意，此刷新问题不会出现在索引页 ( http://localhost:8080/ ) 上，因为我已实现此过滤器:

@Component
public class IndexWebFilter implements WebFilter {

    @Override
    public Mono<Void> filter(ServerWebExchange exchange, WebFilterChain chain) {
        if (exchange.getRequest().getURI().getPath().equals("/")) {
            return chain.filter(
                exchange.mutate().request(exchange.getRequest().mutate().path("/index.html").build()
                ).build()
            );
        }
        return chain.filter(exchange);
    }
}

为我的每个 Angular 路由实现一个这样的过滤器显然是不可行的......

编辑 3 :另请注意，出现此问题是因为前端作为后端类路径上的 jar 使用以下配置:

@Configuration
@EnableWebFlux
public class WebConfig implements WebFluxConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**").addResourceLocations("classpath:/");
        registry.addResourceHandler("/").addResourceLocations("classpath:/index.html");
    }
}

换句话说，我既不使用前端代理也不使用反向代理(例如 nginx)

Answer 1

我已经找到了解决我的问题的方法。我弄错的是“转发”到的网址的值。

通过使用 /index.html而不是 / ，应用程序按预期运行。

@Component
public class SpaWebFilter implements WebFilter {

    @Override
    public Mono<Void> filter(ServerWebExchange exchange, WebFilterChain chain) {
        String path = exchange.getRequest().getURI().getPath();
        if (!path.startsWith("/api") && path.matches("[^\\\\.]*")) {
            return chain.filter(
                exchange.mutate().request(exchange.getRequest().mutate().path("/index.html").build()
                ).build());
        }
        return chain.filter(exchange);
    }
}

同样可以通过 NGINX 实现，如下所示:

location / {
    try_files $uri $uri/ /index.html;
}

这假设角度路由不能包含任何点并且不能以 /api 开头。字首。