자체 버전 관리..

v1

 

다 잘 되는 상태

@Bean
public SecurityFilterChain filterChain(HttpSecurity http, AuthenticationManager authenticationManager) throws Exception {

    http.csrf(csrf -> csrf.disable());

    http.cors((corsCustomizer -> corsCustomizer.configurationSource(new CorsConfigurationSource() {
        
        @Override
        public CorsConfiguration getCorsConfiguration(HttpServletRequest request) {

            CorsConfiguration configuration = new CorsConfiguration();

            // configuration.setAllowedOrigins(Collections.singletonList("http://localhost:3000")); //포트 허용
            // configuration.setAllowedOrigins(Collections.singletonList("https://whattowear.store"));
            // configuration.setAllowedOrigins(List.of("http://localhost:3000", "https://whattowear.store"));
            configuration.setAllowedOriginPatterns(List.of("*"));
            configuration.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "PATCH"));
            configuration.setAllowedHeaders(List.of("*"));
            configuration.setAllowCredentials(true);
            configuration.setMaxAge(3600L); //허용 시간

            return configuration;
        }
    
    (생략)	}}

 

POST 요청에 대해 403 에러가 발생하여

SecurityConfig 파일을 수정하고 정상 작동된 모습이다.

 

Webconfig의 Cors 설정은 SecurityConfig와의 중복 문제로 주석 처리하였다.

(원래 SecurityConfig는 configuration.setAllowedOrigins(Collections.singletonList("http://localhost:3000")); 으로 설정했었는데 여러 개의 도메인을 허용하는 WebConfig와 충돌했을 것이다. 다시 Singleton으로 바꾸고 확인해보자) 

/*
중복 문제로 주석 처리

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedOrigins("https://whattowear.store", "http://localhost:3000") // 프론트엔드 주소
            .allowedMethods("GET", "POST", "PUT", "DELETE", "PATCH")
            .allowedHeaders("*")
            .allowCredentials(true);
}
 */

 

 

v1.1 - 삭제

 

Webconfig에서 주석 처리했던 Cors를 다시 주석 해제해보았다. 정상 작동

 

 

v1.2

 

WebConfig에서 주석 처리했던 Cors 다시 주석 해제하고

configuration.setAllowedOrigins(Collections.singletonList("http://localhost:3000"));

 

얘로 해보겠음

 

내가 애먹었던 그 문제가 다시 발생!!

 

그렇다면 v.1.2에서 WebConfig 주석 처리한다면 어떻게 될까 (v1.2.1)

 

v1.2.1

 

WebConfig의 Cors 주석 처리하고

configuration.setAllowedOrigins(Collections.singletonList("http://localhost:3000"));

 

했더니????

 

v1.2와 같은 에러......... 그렇다면 

configuration.setAllowedOrigins(Collections.singletonList("http://localhost:3000"));

 

이게 문제였구나

 

 

v.1.2.2

 

만약에 v.1.2.1이 아닌

configuration.setAllowedOrigins(Collections.singletonList("https://whattowear.store"));

 

라고 하면 어떻게 될까?  -> 정상 작동

 

Collections.singletonList()를 사용하면 Spring의 CORS 설정이 제대로 작동하지 않을 가능성이 있다고 생각했지만,

configuration.setAllowedOrigins(Collections.singletonList("https://whattowear.store")); 라고 했을 때 정상 작동하였다.

 

결국 configuration.setAllowedOrigins(Collections.singletonList("http://localhost:3000"));로 설정한 게 문제였다.

 

https:whattowear.store는 배포 환경이고 http://localhost:3000는 로컬 개발 환경

 

배포 환경과 로컬 개발 환경을 모두 지원하기 위해 아래와 같이 작성

configuration.setAllowedOrigins(List.of("http://localhost:3000", "https://whattowear.store"));

 

이렇게 하면 배포 환경과 로컬 개발 환경 모두 허용

 

 

v1.2.3

 

 

아래 코드를 주석 처리하고 확인 -> 정상 작동

@Override
public void addViewControllers(ViewControllerRegistry registry) {
    registry.addViewController("/").setViewName("forward:/index.html");
    registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
}

 

이는 루트 URL(/) 요청이 들어오면 index.html로 포워딩하는 역할을 한다. 즉, https://whattowear.store/에에 접속하면 index.html을 반환하도록 설정하는 것.

 

없어도 잘 되는 이유는 Spring Boot는 기본적으로 static/index.html을 자동으로 서빙하기 때문이다. 즉, / 요청 시 별도 설정이 없어도 index.html이 반환된다. 만약 / 요청을 가로채는 다른 설정이 없다면 이 코드가 없어도 정상 작동한다.

 

그래도 명시적으로 설정할래용

 

 

v2 - 2/22

 

역시나 잘 되는 상태

@Bean
public SecurityFilterChain filterChain(HttpSecurity http, AuthenticationManager authenticationManager) throws Exception {

    http.csrf(csrf -> csrf.disable());

    http.cors((corsCustomizer -> corsCustomizer.configurationSource(new CorsConfigurationSource() {

        @Override
        public CorsConfiguration getCorsConfiguration(HttpServletRequest request) {

            CorsConfiguration configuration = new CorsConfiguration();

            // configuration.setAllowedOrigins(Collections.singletonList("http://localhost:3000")); //포트 허용
            // configuration.setAllowedOrigins(Collections.singletonList("https://whattowear.store"));
            configuration.setAllowedOrigins(List.of("http://localhost:3000", "https://whattowear.store"));
            // configuration.setAllowedOriginPatterns(List.of("*"));
            configuration.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "PATCH"));
            configuration.setAllowedHeaders(List.of("*"));
            configuration.setAllowCredentials(true);
            configuration.setMaxAge(3600L); //허용 시간

            return configuration;
        }

 

v1과 차이점은 아래와 같다.

v2 configuration.setAllowedOrigins(List.of("http://localhost:3000", "https://whattowear.store"));
v1 configuration.setAllowedOriginPatterns(List.of("*"));

아무 도메인이나 허용하면 보안 위험이 있을 수 있기 때문에

특정 도메인만 허용하도록 다시 변경하였다. -> 정상 작동

 

v2.1 - 현재 2/24

 

.anyRequest().permitAll());

// 이 아닌

.anyRequest().authenticated()); 

// 한다면?

 

한다면???? -> 정상 작동

 

이미 위에서 권한 설정을 해서 둘 다 상관없을 듯 하지만....

authenticated()를 사용해 예상치 못한 엔드포인트의 접근은 방지하고 보안을 강화하자

 

 

v2.2

 

 

OPTIONS을 명시적으로 포함해보자 -> ??

config.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"));  // ✅ OPTIONS 추가

 

 

nginx 파일에서 location 주석 처리하니까 안됨 

 

 

v2.1.2 - 삭제