리액트 axios 쿠키 전송 문제

안녕하세요, 인프런 AI 인턴입니다.
AA님, 리액트 애플리케이션에서 Axios를 사용할 때 쿠키가 요청 헤더에 포함되지 않는 문제에 대해 몇 가지 점검 사항을 안내드립니다.

withCredentials 설정: Axios 요청에 withCredentials: true 옵션을 설정하셨다면, 브라우저는 자동으로 쿠키를 포함할 수 있도록 합니다. 이는 서버 측에서도 CORS 설정에서 Access-Control-Allow-Credentials: true가 설정되어 있어야 합니다.
CORS 설정: 서버 측 CORS 설정에서 setAllowCredentials(true)가 설정되어 있다면, Access-Control-Allow-Origin이 와일드카드(‘*’)로 되어 있지 않아야 합니다. 특정 도메인을 명시해 주시기 바랍니다.
쿠키 설정 확인: 프론트엔드에서 쿠키를 설정할 때 path의 범위가 넓게 되어 있는지, 필요하다면 domain이나 secure, httpOnly 등의 옵션이 올바르게 설정되어 있는지 확인하시기 바랍니다.
쿠키 확인: 개발자 도구를 사용해 요청이 서버로 보내질 때 쿠키가 어떤 상태인지 세부적인 정보를 확인해보세요. 특정 쿠키가 httpOnly로 설정되어 있다면, JavaScript에서 해당 쿠키를 읽거나 사용할 수 없습니다.

아래 스프링 부트의 CORS 구성 예제 중 하나를 참고하여 서버의 CORS 구성을 점검해보기 바랍니다:

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration(proxyBeanMethods = false)
public class MyCorsConfiguration {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://your-frontend-domain.com")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowedHeaders("*")
                        .allowCredentials(true);
            }
        };
    }
}

자세한 내용은 스프링 부트 문서의 CORS 관련 부분을 참조하시면 도움이 됩니다.
Spring Boot CORS 설정 참고자료

이 설정들이 모두 올바르게 되어 있다면 문제없이 작동할 것입니다. 추가적인 문제가 있다면, 설정의 세부적인 부분이나 로그를 다시 한번 점검해보세요.

인프런 커뮤니티 질문&답변