브라우저는 same-origin policy(SOP, 동일 출처 정책)에 의해 다른 출처의 리소스를 허용하지 않음.
CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)
-동일 출처가 아니더라도 요청을 수행할 수 있도록 해주는 SOP 예외 정책, 서로 다른 origin끼리 리소스 요청을 받을 수 있도록 표준( Same Origin Policy )을 우회하는 기술
SOP(same-origin policy, 동일 출처 정책)
- 브라우저가 동일 출처 정책을 준수해 다른 origin의 리소스 접근을 막는 것
Origin이란
- Protocol http , https + Host home (localhost , naver.com , google.com) + port (80 , 8080 , 8000)의 조합으로 이루어진 URL, 만약 동일하지 않다면 CORS 설정을 통하여 Access-Control-Allow-Origin을 서버의 응답헤더에 작성해서 접근 권한을 얻을 수 있음
프리플라잇이란?
- 브라우져는 서버에 request를 보낼 때 http 메서드중 options 메서드를 활용해 preflight을 전송 이 때 response로 서버는 허가된 origin과 method를 브라우저에게 알려주게 됨
브라우저가 정상적으로 response를 확인하고나면 이후 cors요청을 전송
CORS의 동작 원리 (Simple request)
서버 응답 시, 브라우저가 요청한 Origin과 헤더(Access-Control-Request-Headers)의 값을 비교하여 유효한 요청이면 리소스를 응답. 유효하지 않으면 브라우저에서 이를 막고 에러 발생
스프링에서 해결 방법
스프링에선 컨트롤러에서 특정 메서드 혹은 컨트롤러 상단부에 @CrossOrigin 어노테이션을 활용하는 방법과 WebMvcConfigurer의 addCorsMappings(CorsRegistry) 메소드를 사용하는 방법이 있는데 전자는 컨트롤러가 많을 수록 설정해야 하는 어노테이션이 많아진다는 단점 때문에 팀프로젝트에서는 후자를 사용
해결한 경험
- WebMvcConfigurer를 구현하는 CorsConfig 클래스를 작성한 후
해당 클래스에서 CorsRegistry 클래스를 파라미터로 받는 addCorsMapping 메서드를 Override했음
이후 파라미터의 allowedOrigins 메서드를 사용해 프론트 엔드 origin에 접근을 허용해줌으로써
정상적으로 preflight 요청에서 브라우저가 접근 허용이 되어있음을 확인할 수 있도록 해주었습니다.
