각진 스프링 부츠JS html5 모드

각진 스프링 부츠JS html5 모드

저는 봄부트로 웹 애플리케이션을 시작합니다.기본 클래스를 사용하여 내장된 Tomcat 서버를 시작합니다.

@Configuration
@EnableAutoConfiguration
@ComponentScan
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

}

나는 그가 활성화될 angularjs html5 모드를 처리할 수 있는 방식으로 서버를 구성하고 싶습니다.

$locationProvider.html5Mode(true);

다른 사용자의 관련 게시물을 보면 루트로 리디렉션해야 합니다.html5 모드는 URL에서 해시백을 제거합니다.페이지를 새로 고치면 서버가 해시를 처리하지 않기 때문에 페이지를 찾을 수 없습니다. 자세한 내용은 다음을 참조하십시오.JS - URL 주소 $routeProvider를 변경할 때 작동하지 않는 것 같고 404 오류가 발생하는 이유

이 컨트롤러를 사용하여 Angular를 유지하기 위해 URI를 index.html로 전달합니다.JS 노선출처 https://spring.io/blog/2015/05/13/modularizing-the-client-angular-js-and-spring-security-part-vii

@Controller
public class ForwardController {

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

이 솔루션에서 ForwardController는 다른 어떤 경로에도 정의되지 않은 경로만 전달합니다.Controller도 아니다RestController이는 다음을 이미 보유하고 있는 경우를 의미합니다.

@RestController
public class OffersController {

    @RequestMapping(value = "api/offers")
    public Page<OfferDTO> getOffers(@RequestParam("page") int page) {
        return offerService.findPaginated(page, 10);
    }
} 

두 컨트롤러 모두 제대로 작동합니다.@RequestMapping(value = "api/offers")이전에 확인됨@RequestMapping(value = "/**/{[path:[^\\.]*}")

저도 같은 문제가 있었어요.html5 모드에서 angularjs는 해시를 해결하지 않고 pushState를 통해 추가된 url 또는 url을 입력한 것으로 알고 있습니다.

문제는 파일이 아닌 PathResourceResolver 매핑 디렉토리입니다.디렉터리에서 요청된 파일을 제공하지만 URL을 다시 작성하지는 않기 때문입니다.앱의 경우 브라우저 창을 새로 고치거나 http://example.com/mystate, 처럼 url을 입력하면 서버에서 "/mystate" 쿼리가 됩니다.봄이 url을 모르면 404를 돌려줍니다.해결책 중 하나는 여기와 같이 가능한 모든 상태를 index.html에 매핑하는 것입니다(소스, 웹jar를 보세요 - 좋습니다!).하지만 "/**"를 index.html에 안전하게 매핑할 수 있으므로 PathResourceResolver #getResource를 재정의하는 것이 제 솔루션입니다.

@Configuration
@EnableConfigurationProperties({ ResourceProperties.class })
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Autowired
    private ResourceProperties resourceProperties = new ResourceProperties();

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        Integer cachePeriod = resourceProperties.getCachePeriod();

        registry.addResourceHandler("/static/**")
                .addResourceLocations("classpath:/static/")
                .setCachePeriod(cachePeriod);

        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/static/index.html")
                .setCachePeriod(cachePeriod).resourceChain(true)
                .addResolver(new PathResourceResolver() {
                    @Override
                    protected Resource getResource(String resourcePath,
                            Resource location) throws IOException {
                        return location.exists() && location.isReadable() ? location
                                : null;
                    }
                });
    }
}

저는 그것으로 살 수 있는 해결책을 찾았습니다.

@Controller
public class ViewController {

    @RequestMapping("/")
    public String index() {
        return "index";
    }

    @RequestMapping("/app/**")
    public String app() {
        return "index";
    }
}

angularjs app은 서브도메인 app 아래에 있어야 합니다.원하지 않는 경우 하위 도메인 앱에 매핑되는 app.subdomain.com 과 같은 하위 도메인을 만들 수 있습니다.이 구성을 사용하면 웹jar, statis 컨텐츠 등과 충돌하지 않습니다.

이전 코드에 대한 약간의 수정은 나에게 효과가 있습니다.

// Running with Spring Boot v1.3.0.RELEASE, Spring v4.2.3.RELEASE
@Configuration
@EnableConfigurationProperties({ ResourceProperties.class })
public class WebMvcConfig extends WebMvcConfigurerAdapter {

@Autowired
private ResourceProperties resourceProperties = new ResourceProperties();

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    Integer cachePeriod = resourceProperties.getCachePeriod();

    final String[] staticLocations = resourceProperties.getStaticLocations();
    final String[] indexLocations  = new String[staticLocations.length];
    for (int i = 0; i < staticLocations.length; i++) {
        indexLocations[i] = staticLocations[i] + "index.html";
    }
    registry.addResourceHandler(
            "/**/*.css",
            "/**/*.html",
            "/**/*.js",
            "/**/*.json",
            "/**/*.bmp",
            "/**/*.jpeg",
            "/**/*.jpg",
            "/**/*.png",
            "/**/*.ttf",
            "/**/*.eot",
            "/**/*.svg",
            "/**/*.woff",
            "/**/*.woff2"
            )
            .addResourceLocations(staticLocations)
            .setCachePeriod(cachePeriod);

    registry.addResourceHandler("/**")
            .addResourceLocations(indexLocations)
            .setCachePeriod(cachePeriod)
            .resourceChain(true)
            .addResolver(new PathResourceResolver() {
                @Override
                protected Resource getResource(String resourcePath,
                        Resource location) throws IOException {
                    return location.exists() && location.isReadable() ? location
                            : null;
                }
            });
}

}

사용자 정의 ErrorViewResolver를 제공하여 찾을 수 없는 모든 리소스를 기본 페이지로 전달할 수 있습니다.@Configuration 클래스에 추가하기만 하면 됩니다.

@Bean
ErrorViewResolver supportPathBasedLocationStrategyWithoutHashes() {
    return new ErrorViewResolver() {
        @Override
        public ModelAndView resolveErrorView(HttpServletRequest request, HttpStatus status, Map<String, Object> model) {
            return status == HttpStatus.NOT_FOUND
                    ? new ModelAndView("index.html", Collections.<String, Object>emptyMap(), HttpStatus.OK)
                    : null;
        }
    };
}

5 이 스프링 하거나 사용하지 않고 합니다.spring-boot-starter-tomcat~하듯이provided아니, 아니!

/**
 * Needed for html5mode (PathLocationStrategy in Angular). Every path except api/* and resources (css, html, js, woff, etc..)
 * should be redirect to index.html and then should angular managed routes (which could be correct or non existing).
 */
@RestController
@RequestMapping
public class ForwardController {

    @GetMapping(value = "/**/{[path:[^\\.]*}")
    public ModelAndView forward() {
        return new ModelAndView("/index.html");
    }
}

리소스를 구성하는 동시에 AngularJS Html5 모드를 사용하려는 비슷한 문제가 발생했습니다.

이 제경에파제공다니습었되일이적정는에서 되었습니다./public경로를 지정하여 인덱스 작업에 다음 요청 매핑을 사용했는데 모두 정상적으로 작동합니다.

@RequestMapping(value = {"", "/", "/{[path:(?!public).*}/**"}, method = GET)
public String indexAction() {
    return "index";
}

각진 Html5Mode를 사용할 때도 같은 문제가 있었습니다.제 경우 "/"의 경우 인덱스 보기에 경로를 할당하는 web.xml의 404에 대한 오류 페이지를 구성하는 것이 제게 효과적인 해결책이었습니다.

<error-page>
    <error-code>404</error-code>
    <location>/</location>
</error-page>

마찬가지로 스프링 부트에서 오류 페이지를 구성할 수 있습니다.참고로, 당신은 이 링크를 확인할 수 있습니다.

스프링 부트 및 사용자 지정 404 오류 페이지

1- 먼저 새 컨트롤러를 만든 다음 아래 코드를 복사하여 붙여넣습니다.

@Controller
public class viewController {

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

}

3- 각진 앱에서 아래 항목 2개를 제거

$locationProvider.hashPrefix('!');
$urlRouterProvider.otherwise("/");

은 추해야하 2-도애플션이를 .$locationProvider.html5Mode(true);앱 경로 지정

3 - index.html 파일의 http 요청 앞에 기본 태그를 배치하는 것을 잊지 마십시오.

<head>
<base href="/"> /* Or whatever your base path is */

//call every http request for style and other 
...
</head>

저한테는 괜찮아요.

언급URL : https://stackoverflow.com/questions/24837715/spring-boot-with-angularjs-html5mode