Cannot access asset in spring-boot project due to spring security

Question

I am facing quite an interesting issue. In my controller class I added path @RequestMapping("/product") . Inside class when I put a path on method like @GetMapping("/update/{productId}") that means when I divided path by / I cannot access asset file in my html page. But if I define path like @GetMapping("/{productId}") it works fine. Using path like @GetMapping("/update/{productId}") this my asset URL become like this.

 http://localhost:8080/product/assets/js/editor/ckeditor/ckeditor.custom.js

You can see /product/ added automatically in the URL. As a result, html page cannot find those assets as there is no product folder and get 404

And using a path like @GetMapping("/{productId}") asset url become fine

http://localhost:8080/assets/js/editor/ckeditor/ckeditor.custom.js

My controller class is

@Controller
@RequestMapping("/product")
public class AdminProductController {

@GetMapping("/update/{productId}")
    ModelAndView modelAndView = new ModelAndView("admin/add-product");
        //my code
        return modelAndView;
    }
}

In my WebSecurityConfig i configured like bellow.

 @Override
    protected void configure(HttpSecurity http) throws Exception {

        http
                .csrf().disable()
                .authorizeRequests()
                .antMatchers("/", "/admin/login","/customer/login", "/logout","/file/**").permitAll()
                .antMatchers("/admin/**","/category/**","/product/*").hasAnyAuthority("ROLE_ADMIN")
                .antMatchers("/customer/**").hasAnyAuthority("ROLE_CUSTOMER")
                .anyRequest().authenticated()
                .and()
                .formLogin()
                .loginPage("/admin/login")
                .loginProcessingUrl("/login")
                .loginPage("/customer/login")
                .loginProcessingUrl("/login")
                .failureUrl("/customer/login?error")
                .successHandler(successHandler);
        http
                .logout()
                .logoutUrl("/logout")
                .logoutSuccessUrl("/")
                .deleteCookies("JSESSIONID")
                .invalidateHttpSession(true)
                .permitAll();
    }


    @Override
        public void configure(WebSecurity web) throws Exception {
            web
                    .ignoring()
                    .antMatchers("/resources/**", "/static/**", "/assets/**", "/css/**", "/fonts/**", "/js/**", "/images/**");
        }

and I also added this code in WbMvcConfifure

@Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
         registry.addResourceHandler("/resources/static/**").addResourceLocations("classpath:META-INF/resources/static/");
    }

and here is my add-product.html

 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Bigdeal admin is super flexible, powerful, clean &amp; modern responsive bootstrap 4 admin template with unlimited possibilities."> <meta name="keywords" content="admin template, Bigdeal admin template, dashboard template, flat admin template, responsive admin template, web app"> <meta name="author" content="pixelstrap"> <link rel="icon" href="../assets/images/favicon/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="../assets/images/favicon/favicon.ico" type="image/x-icon"> <title>P&S Craft- Hand made,Hand print & Natural</title> <!-- Google font--> <link href="https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <!-- Font Awesome--> <link rel="stylesheet" type="text/css" th:href="@{/assets/css/font-awesome.css}"> <!-- Flag icon--> <link rel="stylesheet" type="text/css" href="@{/assets/css/flag-icon.css}"> <!-- Bootstrap css--> <link rel="stylesheet" type="text/css" th:href="@{/assets/css/bootstrap.css}"> <!-- App css--> <link rel="stylesheet" type="text/css" th:href="@{/assets/css/admin.css}"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css" /> </head> <body> <!-- page-wrapper Start--> <div class="page-wrapper"> <!-- Page Header Start--> <div th:replace="fragments/header_admin :: header"></div> <!-- Page Header Ends --> <!-- Page Body Start--> <div class="page-body-wrapper"> <!-- Page Sidebar Start--> <div th:replace="fragments/leftsidebar_admin :: leftsidebar"></div> <!-- Page Sidebar Ends--> <!-- Right sidebar Start--> <div th:replace="fragments/rightsidebar_admin :: rightsidebar"></div> <!-- Right sidebar Ends--> <div class="page-body"> <!-- Container-fluid starts--> <div class="container-fluid"> <div class="page-header"> <div class="row"> <div class="col-lg-6"> <div class="page-header-left"> <h3> Add Products </h3> </div> </div> </div> </div> </div> <!-- Container-fluid Ends--> <!-- Container-fluid starts--> <div class="container-fluid"> </div> <!-- Container-fluid Ends--> </div> <!-- footer start--> <div th:replace="fragments/footer_admin :: footer"></div> <!-- footer end--> </div> </div> <!-- latest jquery--> <script src="../assets/js/jquery-3.3.1.min.js"></script> <!-- Bootstrap js--> <script src="../assets/js/popper.min.js"></script> <script src="../assets/js/bootstrap.js"></script> <!-- feather icon js--> <script src="../assets/js/icons/feather-icon/feather.min.js"></script> <script src="../assets/js/icons/feather-icon/feather-icon.js"></script> <!-- Sidebar jquery--> <script src="../assets/js/sidebar-menu.js"></script> <!-- touchspin js--> <script src="../assets/js/touchspin/vendors.min.js"></script> <script src="../assets/js/touchspin/touchspin.js"></script> <script src="../assets/js/touchspin/input-groups.min.js"></script> <!-- form validation js--> <script src="../assets/js/dashboard/form-validation-custom.js"></script> <!-- ckeditor js--> <script src="../assets/js/editor/ckeditor/ckeditor.js"></script> <script src="../assets/js/editor/ckeditor/styles.js"></script> <script src="../assets/js/editor/ckeditor/adapters/jquery.js"></script> <script src="../assets/js/editor/ckeditor/ckeditor.custom.js"></script> <!-- Zoom js--> <script src="../assets/js/jquery.elevatezoom.js"></script> <script src="../assets/js/zoom-scripts.js"></script> <!--Customizer admin--> <script src="../assets/js/admin-customizer.js"></script> <!-- lazyload js--> <script src="../assets/js/lazysizes.min.js"></script> <!--right sidebar js--> <script src="../assets/js/chat-menu.js"></script> <!--script admin--> <script src="../assets/js/admin-script.js"></script> </body> </html>

and here is my folder structure

Any suggestions will be appreciated!

Answer 1

All the assets have to be linked using the approach:

th:href="@{/assets/css/<your css file name here>}"

Same with JS and any other static resources placed under src/main/resources/static

Cannot access asset in spring-boot project due to spring security

Question

1 answers

solution1
0 2019-12-03 10:58:15

Cannot access asset in spring-boot project due to spring security

Question

1 answers

solution1 0 2019-12-03 10:58:15

solution1
0 2019-12-03 10:58:15