클라이언트와 서버가 협업을 해야하는데 요청한 서버 데이터가 CORS에 의해 막히는 현상이 발생했다.

SOP

SOP는 Same origin policy의 약자로 이름 그대로 같은 출처에 대한 HTTP 요청만을 허락한다는 정책이다.

이런 정책이 왜 필요할까? SOP가 없다면 어떻게 될까? 예를 하나 들어보자.

해커가 본인의 api 서버(https://hackers.com)를 하나 열어두고 접근한 사용자로 하여금 해커가 정의한 요청들(https://mail.goole.com)을 수행하도록 하는 스크립트를 짜둔다. 그리곤 링크를 교묘하게 숨겨 뿌리는 것으로 사용자가 본인 서버에 접근할 수 있도록 한다.

사용자는 본인의 브라우저의 인증 쿠키와 함께 해커가 정의한 요청을 수행하게 되고, 'https://mail.goole.com' 입장에서는 사용자가 요청한 것과 같으므로 정상 수행하게 된다.

CORS

이런 SOP, 동일 출처 정책이 보안을 위해 중요하지만 다른 출처로 요청을 보내고 자원을 얻어야 하는 상황이 분명히 있다. 반대로 서버 입장에서도 다른 출처에서 본인의 자원을 얻을 수 있도록 열어줘야 하는 상황이 존재한다.

Cross-Origin Resource Sharing, 교차 출처 리소스 공유이 바로 이런 상황에서 다른 출처의 자원에 접근할 수 있는 권한을 부여하는 체제이다. CORS 처리 방식 중에 가장 보편적인, 그리고 이번에 내가 경험했던 Prefilght request를 이용하는 방법을 소개하려고 한다.

해결

Preflight request 방식은 브라우저가 본 요청을 보내기 전에 preflight에 해당하는 사전 요청을 미리 보내 서버에 어떤 요청이 전달될 것임을 알리고, 서버에서 허용한 정책을 확인하여 브라우저 스스로 이 요청을 보내는 것이 안전한지 확인하는 방법이다.

Websicurity에 WebMvcConfigurer 인터페이스를 Bean으로 등록하여 상속 받은 addCorsMapping 메서드로 보내줄 url과 Origins로 보내줄 포트번호를 입력하여 Cors 문제 해결