📢 CORS 정책이란
CORS는 한 출처(origin) 에서 실행되고 있는 웹 애플리케이션이 다른 출처(cross-origin)에 원하는 리소스에 접근할 수 있는 권한 여부를 알려주는 매커니즘이다.
📢 출처(Origin)란?
특정 페이지에 접근할 때 사용되는 URL의 Scheme(프로토콜), host(도메인), 포트를 말한다.
여기서 CORS를 이해하는데 필요한 것은 딱 3가지
Origin : Protocol + Host + Port 이다.
✅ 동일 출처 정책(Same-Origin Policy)
출처(Origin)에 대해 알아봤으니 Same Origin과 Cross Origin 정책에 대해 알아보겠다.
먼저 SOP(Same Origin Policy) 정책은 동일한 출처에 대한 정책을 말하며 동일한 출처에서만 리소스를 공유할 수 있다. 라는 법률을 가지고 있다.
즉, 동일 출처(Same-Origin) 서버에 있는 리소스는 자유로이 가져올수 있지만, 다른 출처(Cross-Origin) 서버에 있는 이미지나 유튜브 영상 같은 리소스는 상호작용이 불가능하다는 말이다.
✅ 출처 비교와 차단은 브라우저가 한다.
출처를 비교하는 로직은 서버에 구현된 스펙이 아닌 브라우저에 구현된 스펙이다.
브라우저가 이 응답을 분석해서 동일 출처가 아니면, 시뻘건 에러를 내뿜는 것이다. (사실 서버가 헤더 정보를 덜 줘서 그런것이다. 이는 뒤에서 다룬다)
브라우저가 정책으로 차단을 한다는 말은, 브라우저를 통하지 않고 서버 간에 통신을 할때는 정책이 적용되지 않는다는 말과 같다.
즉, 클라이언트 단 코드에서 API 요청을 하는게 아니라, 서버 단 코드에서 다른 출처의 서버로 API 요청을 하면 CORS 에러로부터 자유로워 진다. 그래서 이를 이용한 프록시(Proxy) 서버라는 것이 있다
SOP 정책을 위반해도 CORS 정책에 따르면 다른 출처의 리소스라도 허용
위의 브라우저의 CORS 동작 과정을 살펴보니, 길고 길었던 여정의 결론은 서버에서 Access-Control-Allow-Origin 헤더에 허용할 출처를 기재해서 클라이언트에 응답하면 되는 것이었다. 즉, 백엔드 개발자가 고쳐야될 부분인 것이다.
✅ Spring 세팅
📌 참고
