Как правильно добавить фронт к spring boot rest api?

Question

[Степан]

Разработал API. Запросы к конкретным ресурсам:

/api/auth/register
/api/auth/verify
/api/auth/login
/api/users
/api/users/{id}/shelves
/api/shelves/{id}/books
/api/books/{id}/wish
и т.д.

обрабатывают rest-контроллеры.

Запросы идут на localhost:8080/api (данные принимаются и отдаются в JSON). После успешного входа выдаётся JWT, который должен использоваться в запросах к другим rest-контроллерам ("/api/users", "/api/shelves" и пр.).
На всех контроллерах, кроме Auth, требуется JWT.

Сейчас я решил добавить фронт. Думаю реализовать это в виде SPA на Vue.js
Что сделал: в папку /resources/templates положил index.html, в /resources/static положил /css/main.css и /js/main.js.
Добавил обычный контроллер:

@Controller
public class IndexController {

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

Главная страница (localhost:8080) загрузилась, но JS и стили — нет (401 ошибка). Как я понял, это связано с настройками WebSecurityConfig.

@Override
    protected void configure(HttpSecurity http) throws Exception {
        http.httpBasic().and().cors().and().csrf().disable()
                .exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
                .authorizeRequests().antMatchers("/api/auth/*").permitAll()
                .antMatchers("/", "/resources/**").permitAll()
                .anyRequest().authenticated();

        http.addFilterBefore(authenticationJwtTokenFilter(), UsernamePasswordAuthenticationFilter.class);
    }

Пожалуйста, помогите разобраться, что нужно поменять, чтобы ресурсы начали грузиться?
Как вообще работает настройка доступа? Важен ли порядок? Где об этом написано доступным языком?

Comments

[сергей кузьмин]

по моему разрешающий доступ к ресурсам просто выполняется в отдельный вызов , не chained

http
		.authorizeRequests()
		.antMatchers("/", "/login", "/login/", "login", "/logout", "/resources/theme/css/**", "/resources/theme/img/**", "/resources/theme/js/**")
		.permitAll();

http
        .httpBasic()
        .and()
        .addFilterBefore(this.sessionSessionRepositoryFilter, ChannelProcessingFilter.class)
        .authorizeRequests()
        .anyRequest()
        .authenticated();

[Орхан Гасанлы]

На всех контроллерах, кроме Auth, требуется JWT.

Еще стоит метод для обновления токена тоже делать без авторизации.

[Степан]

сергей кузьмин,

по моему разрешающий доступ к ресурсам просто выполняется в отдельный вызов , не chained

А как разрешающий доступ комбинируется с запрещающим?

[Степан]

Орхан Гасанлы, я пока без refresh-токена. Но если этот метод потребуется, в auth-контроллере он будет работать, т.к. тот доступен без авторизации.

[сергей кузьмин]

Степан, так я же привел фрагмент кода из похожего демо проекта из SecurityConfiguration. порядок вызова методов очевидно важен
разрешающий

http.authorizeRequests()
				.antMatchers("/css/**", "/js/**", "/login", "/logout")
				.permitAll().anyRequest().fullyAuthenticated().and().logout()
				.permitAll();

похож на ваш код
попробуйте использовать
и свой servelet фильтр оставьте как есть

детали напр у https://www.baeldung.com/security-spring

Answer 1

[Максим Федоров]

статика должна отдаватсья напрямую, не проходить через бекенд и тем более через фаерволл
Я не знаю, как в джава сервер статику отдает и принято ли за Nginx ставить бекенд, но это надо сделать

https://www.baeldung.com/spring-mvc-static-resources

Как вариант: за спрингом оставить севрер с АПИ, а сервер со статикой (в том числе фронтовый index.html) отдавать др сервером с Nginx, ну или сделать как выше посоветовал... быстрее и удобнее наверное так

Comments

[Максим Федоров]

Вам все равно за https прятать
Возьмите nginx и пусть он все отдаёт статическое, а не статическое прокиснут на сервер Спринга

server {
    listen 80;
    server_name sub.domain.com;

    location / {
            proxy_pass http://domain.com:8090/;
    }

    location ~* \.(svg|js|jpg|png|css|html|gif|pdf)$ {
            proxy_pass              $scheme://domain.com:8090/$request_uri;
            proxy_redirect  off;
            proxy_set_header        X-Real-IP $remote_addr;
            proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header        Host $http_host;
            expires 30d;
    }
}

HTML пусть отдаёт спринг

[Степан]

Пока остановлюсь на отдаче html и статики Nginx'ом. Как я понимаю, проблем с запросами к API от фронта быть не должно, если всё нормально работало через Postman.