SPA 프런트엔드를 위한 Spring Framework 5.3+, Spring Boot 2.3+ 라우팅 구성

SPA 프런트엔드를 위한 Spring Framework 5.3+, Spring Boot 2.3+ 라우팅 구성

나는 Angular를 사용하여 만든 간단한 프론트 엔드 애플리케이션이 있습니다.모든 라우팅은 Angular에서 처리되므로 Spring boot에서 모든 페이지 트래픽을 전달합니다."/"각도 라우팅으로 처리할 수 있습니다.

스택 오버플로에 이미 알려진 응답이 있습니다.다음과 같습니다.

• spring-boot-single-page-application-patch-on-any-url
• 구성-스프링-부트-프론트 엔드에 대한 부트
• 스프링부츠-슬립싱글페이지포함-슬립2

그러나 Spring Framework 5.3 이상에서는 작동하지 않습니다. AntPathMatcher로 대체되었습니다.PathPattern.PathPattern호환 가능AntPathMatcher다음을 제외한 구문:

다중 세그먼트 일치에 대한 "**" 지원은 패턴 끝에서만 허용됩니다.이렇게 하면 지정된 요청에 가장 가까운 일치 항목을 선택할 때 모호성의 원인을 대부분 제거할 수 있습니다.

따라서 이 방법은 더 이상 사용할 수 없습니다.

  // Match everything without a suffix (so not a static resource)
  @RequestMapping(value = "/**/{path:[^.]*}")
  public String redirectAngularRoutes() {
    return "forward:/";
  }

그렇다면 Spring Framework 5.3에서 시작하는 가장 좋은 접근 방식은 무엇입니까?

각 각도 라우팅을 지정합니까?forward까지."/"아래와 같이 또는 다른 대안이 있습니까?

  @RequestMapping({ "/help/**","/view/**","/admin/**" })
  public String redirectAngularRoutes() {
    return "forward:/";
  }

application.yml에서 ant path matcher를 사용하도록 경로 일치 전략을 구성할 수 있습니다.

spring:
  mvc:
    pathmatch:
      matching-strategy: ant_path_matcher

현재 Ant Path Matcher에 대한 사용 중지 경고는 없지만 향후 제거될 수 있습니다.

저는 조금 전에 인터넷의 알려지지 않은 부분에 묻혀 있는 다른 접근법을 발견했지만, 그것이 어디에 있는지 신용을 주기 위한 제 발걸음을 추적하지 못했습니다.원작자에게 사과드립니다.

어쨌든, 이것이 제시된 해결책이며 현재로서는 잘 작동하고 있는 것으로 보입니다.

import org.springframework.web.filter.OncePerRequestFilter
import javax.servlet.FilterChain
import javax.servlet.http.HttpServletRequest
import javax.servlet.http.HttpServletResponse


class AngularRoutingFilter : OncePerRequestFilter() {


    override fun doFilterInternal(
            request: HttpServletRequest,
            response: HttpServletResponse,
            filterChain: FilterChain
    ) {

        val mode = request.getHeader("Sec-Fetch-Mode")

        when (mode) {
            "navigate" -> {
                val rd = request.getRequestDispatcher("/")
                rd.forward(request, response)
            }
            else -> filterChain.doFilter(request, response)
        }

    }


}

이 방법은 클라이언트가 올바른 헤더를 설정해야 한다는 단점이 있습니다.사이프레스 테스트를 실행할 때 제대로 작동하지 않아서 cy.visit 명령을 무시해야 한다는 것을 알게 되었습니다.

Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
    originalFn(
        url,
        {
            headers: {
                'Sec-Fetch-Mode': 'navigate'
            },
            ...options
        }
    )
})

언급URL : https://stackoverflow.com/questions/71160586/configure-spring-framework-5-3-spring-boot-2-3-routing-for-spa-frontend