reqeust.getCookies()가 empty 인 경우

🕛 발단

프로젝트를 진행하는 도중 cookie 값을 확인해야 하는 경우가 생김
하지만 reqeust.getCookies해도 cookie를 못 가져옴
관리자 도구로 확인하면 path 설정이 잘 되어 있고, 서버 및 클라이언트에서는 아무런 오류가 발생되지 않았음.

🕒 해결방법

결론 먼저 말하자면 client 요청 axios에 withCredentials을 true로 설정한 후
credential: 크로스 도메인에서 추가로 요청을 전달한 정보를 의미(쿠키, 인증헤더, TLS client certificates(증명서)를 말한다.)

  const instance = axios.create({
    baseURL: `${process.env.VUE_APP_API_BASE_URL}`,
    withCredentials: true,
    headers: {
      "Content-Type": "application/json; charset=utf-8",
    },
  });

Server에서 corsConfig를 설정해줘야 함. 나는 SpringSecurity의 SecurityFilterChain을 사용하고 있어서 SecurityConfig 부분에 설정해줌.

	    @Bean
    protected SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
            .cors() //cors 설정 추가
			~~~~
        return http.build();
    }

    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList(" { 요청URL } "));
        configuration.setAllowedMethods(Arrays.asList("HEAD", "GET", "POST", "PUT")); //요청 메소드
        configuration.setAllowedHeaders(Arrays.asList("Authorization", "Cache-Control", "Content-Type")); //허용할 헤더 
        configuration.setAllowCredentials(true); // ---> 이 부분이 front 설정과 같은 부분
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }

이렇게 설정해 줬더니 중간에 발생한 cors에러를 해결하고 cookie 정보를 확인할 수 있었음.

🕕 여러가지 시도

1. 처음에 setPath를 특정 url로 했는데(ex "/api/~~)이 부분 때문에 못 가져오는건가 하고 "/"로 수정 -> 결과는 똑같이 못 가져옴.
2. context-path가 설정되어 있었는데 이 부분 때문인가 하고 context-path도 "/"으로 수정 요청 url 또한 이에 맞춰서 수정 -> 실패

3.chatGPT와 씨름하던 중 withCredentials을 알게됨 ->
blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'
cors 에러 발생 보안상 origin header에 도메인을 반드시 설정해야함, 와일드카드('*')불가

4. 위 cors에러를 해결하기 위해 WebMvcConfigurer를 사용함 이번엔 been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
에러 발생.. origin header를 설정해줬더니 일반적인 cors에러가 발생함

5. Spring Security 5.x 이후부터는 WebSecurityConfigurerAdapter를 지원하지 않음. 그래서 WebMvcConfigurer가 아닌 CorsConfigurationSource를 사용하여 위와 같이 수정하였고 오류를 해결할 수 있었음

마무리

Domain이 같아도 port번호가 다르면 cross-domain이라 cookie를 전달할 수 없다. 무조건 cors로 해결해야함.

credential을 처음 접하게 되면 아예 검색하는 방법 조차 막막하다.. chatGPT와 씨름하고 검색하면서 이틀을 삽질했다.. 단순히 reqeust.getCookies() null을 검색해도 path 얘기만 주구장창 나온다. 그래도 주말동안 해답을 찾을 수 있어서 정말 다행이었다.