[Spring] CORS(Cross-Origin Resource Sharing) 에러 해결

프로젝트에서 프론트 팀원분께서 api 연동을 하려는데 이러한 에러가 뜬다고 말씀해 주셨습니다.

 

Access to XMLHttpRequest at 'http://ip주소/api/matches' from origin 'http://127.0.0.1:5173' has 
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

주어진 에러 메세지는 브라우저에서 발생한 CORS 관련 오류입니다. 서버에서 CORS 정책이 적절하게 구성되지 않은 경우에 클라이언트에서 요청한 IP주소에서 리소스를 요청하는 IP주소의 서버가 응답에 "Access-Control-Allow-Origin" 헤더를 포함하지 않은 경우 발생하는 에러입니다.

 

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)는 보안 상의 이유로 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 정책입니다. 웹 애플리케이션은 리소스가 자신의 출처와 다를 때 교차 출처 HTTP 요청을 실행합니다. 

 

Same Origin Vs Other Origin

• 같은 출처는 프로토콜, 호스트, 포트 번호가 동일해야 합니다.
• 이 세 가지 조건중 하나라도 다르면 다른 출처입니다.

XMLHttpRequest(JavaScript에서 제공되는 객체로, 서버와 비동기적으로 데이터를 주고받을 수 있게 해 주고, 웹 브라우저와 웹 서버 간에 메서드에 의해 데이터를 가져올 수 있는 객체입니다. 이 객체를 이용하여 백엔드 서버를 요청하는 경우를 예시로 들면, JavaScript에서는 일반적으로 로 SOP(Same-Origin Policy)를 따릅니다. 그래서 서버 측에서 Cors 관련 Config 설정을 해주지 제대로 해주지 않으면 Cors 정책에 의해 클라이언트는 API 요청에 실패하게 됩니다.  

 

1. WebConfig.class

 allowedOrigins() 메서드를 통해 CORS 정책을 적용할 url를 명시해 주고,  addMapping() 메서드에 해당 url에 모든 경로와 하위 경로에 대해 CORS 정책을 허용하겠다는 의미입니다.

 

2. CorsFilter.class

Cors 구성을 나타내는 인스턴스를 생성해 주고, Origin, Header, Method, Credentials(자격증명 정보(쿠키, 인증헤더)), Maxage(캐시) 등을 다음과 같이 지정해 줍니다. 

 

3. SecurityConfig.class 

filterchain() 메서드에서 CorsConfiguration 객체를 선언하고, 해당 도메인, 메서드, 모든 헤더를 허용할 수 있도록 설정해 줍니다. 

더불어, preflight 요청에 대해 허용(permitAll)해주어야 합니다. CorsUtils::isPreFlightRequest는 Spring Security가 제공하는 메서드로, preflight 요청인지 확인하는 조건을 설정해줍니다. 

 

preflight란?

실제 요청 전에 클라인언트가 서버 측으로 보내는 사전 확인 요청으로, 실제 요청을 보내기 전에 서버가 요청을 처리할 수 있는지 확인하는 용도입니다.

 

Cors 관련 문제를 해결하기 위한 Config 설정을 어떻게 해야 되는지에 대해 알아봤습니다.