[web] 로그아웃 시 cors에러 해결

문제 요약

React에서 axios.post("/logout")으로 로그아웃 요청을 보냈더니,
Spring Security에서 로그아웃 후 Google OAuth 로그인 URL로 리다이렉트되면서 CORS 에러가 발생.

문제원인해결

증상	원인	해결
로그아웃 시 콘솔에 CORS 에러 발생 (No 'Access-Control-Allow-Origin'...)	Axios 요청이 /logout → 서버가 Google 로그인 URL로 302 리다이렉트 → XHR이 cross-origin으로 이동 시도 → 구글이 CORS 허용 헤더를 안 보내서 브라우저가 차단	Axios 대신 window.location.assign("/logout")으로 전체 페이지 이동 처리하여 CORS 검사 없이 동작

 

1. 리다이렉트와 CORS의 관계

• XHR/Axios는 리다이렉트를 따라가도 CORS 검사를 함
• 다른 출처(google.com)로 이동하면 해당 서버가 Access-Control-Allow-Origin을 보내야 하지만, 구글 OAuth는 이를 보내지 않음 → 차단

2. 전체 페이지 이동은 예외

• 브라우저 전체 네비게이션은 CORS 대상이 아니므로 차단되지 않음

요약

• 로그아웃 후 외부 서비스로 리다이렉트될 가능성이 있다면 XHR 대신 전체 페이지 이동 사용
• 백엔드 로그아웃 경로는 permitAll로 공개하여 불필요한 재인증 방지
• Axios를 통한 로그아웃은 리다이렉트 없는 API 전용 엔드포인트일 때만 사용