Spring security 설정으로 인한 401 Unauthorized 에러

1. 개발환경

   Back-end : Spring-boot

   Front-end : Vue.js

 

 

2. 문제현상

   1) Back-end와 Front-end를 따로 서버 구동했을때는 API 통신이 원활하게 진행됨

      (Back-end : mvn spring-boot run / 8080 포트 

       Front-end : npm run serve / 8081포트)

 

    2) Front-end를 build 후 (npm run build) 생성된 static 파일들 (index.html, js폴더, css폴더, favicon.ico 등) 을

        Back-end의 static 폴더 경로에 넣고 Back-end 를 run 했을때,

        Front-end에서 빌드한 index.html으로 접근이 안되는 상황 (401 Unauthorized 발생)

 

 

3. 해결방법

 

   1) SecurityConfiguration.java 등 configuration java 파일을생성한다.

      @Configuration annotation을 통해 config 파일로 만들고 WebSecurityConfigurerApdater를 상속받는다.

      Ex> @EnableWebSecurity

            @EnableGlobalMethodSecurity(prePostEnable = true, securedEnabled = true, jsr250Enabled = true)

            @Configuration

            public class SecurityConfiguration extends WebSecurityConfigurerAdapter

 

 

   2) configure() Overriding을 통해 ignoring 메소드를 넣어 예외처리

      Ex> 

           @Override

           public void configure(WebSecurity web) throws Exception {

                     web.ignoring().antMatchers(

                            // "원하는 url",

                            "swagger-ui.html",   // swgger 사용시

                            "/index.html",   // front-end 에서 build한 static file

                            "/favicon.ico",   // 여기서 설정 안 해주면 index.html이 읽을 수 없음

                            "/css/**",   // 여기서 설정 안 해주면 index.html이 읽을 수 없음

                            "/fonts/**",   // 여기서 설정 안 해주면 index.html이 읽을 수 없음

                            "/img/**",   // 여기서 설정 안 해주면 index.html이 읽을 수 없음

                            "/js/**"   // 여기서 설정 안 해주면 index.html이 읽을 수 없음

                     );

           }