백엔드/스프링(부트) (3) 썸네일형 리스트형 Spring Security와 Axios를 활용한 CORS 및 Authorization 헤더 문제 해결 문제 정의1. CORS 문제클라이언트와 서버가 다른 도메인에서 동작하는 경우, 브라우저 보안 정책에 의해 발생하는 CORS(Cross-Origin Resource Sharing) 문제가 발생할 수 있습니다. 이를 해결하지 않으면 클라이언트가 서버에 정상적으로 요청을 보낼 수 없습니다.2. Authorization 헤더 비활성화 문제클라이언트에서 서버로 요청을 보낸 후, 응답 헤더에 포함된 Authorization 값이 보이지 않아 undefined가 출력되는 문제가 발생했습니다.// 로그인 함수const loginUser = async (user: LoginUser): Promise => { const id = toast.loading('로그인 중...'); try { const formData.. 스프링 시큐리티는 복잡합니다. 다만, 공통된 인증 흐름은 존재합니다. 들어가는 말최근에 스프링부트 공부를 시작하면서, 큰 난간이었던 것들 중 하나는 스프링 시큐리티에 관한 것이었습니다. 아무리 내부적으로 추상화 및 캡슐화되어 사용자는 노출된 인터페이스를 기반으로 도구를 사용하면 된다고 해도, 스프링 시큐리티가 내부적으로 어떻게 사용자의 자격증명을 처리하는지 그 흐름을 이해하지 못하고는 제가 도구를 쓰는 것인지, 도구가 나를 쓰는 것인지 긴가민가할 때가 많았습니다. 따라서 오늘은 스프링 시큐리티가 내부적으로 어떤 흐름을 통해 동작하는지 간략하게 살펴보며, 앞으로 학습의 기틀을 단단히 다지는 시간을 가질까 합니다. 스프링 시큐리티?스프링 시큐리티는 스프링 기반 애플리케이션에서 인증(Authentication)과 인가(Authorization)를 처리하는 보안 프레임워크입니다... [스프링 시큐리티] Refused to display 'http://localhost/' in a frame because it set 'X-Frame-Options' to 'deny' 에러 개선 문제 발단- 스프링 시큐리티에서는 기본적으로 X-Frame-Options 을 deny(해당 경로에 대한 모든 frame 삽입 차단)로 지정해두기 때문에, 데이터베이스 조작을 위한 인터페이스를 iframe 형식으로 렌더링 시 이를 차단하기 때문입니다. - 즉, 해당 문제를 개선하려면 해당 경로에 접속하는 경우에는(동일 경로에 한정하여서는) 렌더링되는 것을 허용하도록 스프링 시큐리티 구성 파일에서 설정해주면 됩니다. 코드 적용- 스프링 시큐리티 6.11 버전이상에서 적용- SecurityConfig 파일에 @Configuration@EnableWebSecuritypublic class SecurityConfig { @Bean public SecurityFilterChain filterChain(H.. 이전 1 다음