[이룸] 240202 CORS 에러 이해하기

CORS는 Cross-Origin Resource Sharing의 약자로, “다른 출처에서 온 리소스를 공유하는 것에 관한 정책” 정도로 해석이 가능합니다.여기서 ‘출처’란 “https://www.naver.com”(포트 번호 80 생략)처럼 Protocol과 Host, Port를 모두 합친 URL로, 컴퓨터가 통신을 할 때는 ‘동일한 출처에서만 리소스를 공유’할 수 있습니다’ 이것이 바로 Same Origin Policy, SOP 정책이지요.

출처: https://inpa.tistory.com/entry/WEB-📚-CORS-💯-정리-해결-방법-👏

 

만약 SOP가 없다면 어떻게 될까요? 우리가 악의적인 홈페이지에 방문하게 되는 상황을 가정해 봅시다. hacker.example.com에 접속하면 해커가 몰래 심은 악의적인 자바 스크립트가 실행되어 사용자가 모르는 사이에 어느 포털 사이트에 요청을 보내게 될 수 있습니다. 해커는 이런 식으로 우리를 이용하여 여러 정보를 빼올 수 있죠.

 

이 같은 경우를 방지하기 위해서 SOP는 동일하지 않은 다른 출처의 스크립트가 실행되지 않도록 합니다.

 

하지만 우리에게 다른 출처에 있는 리소스를 가져와 사용하는 일은 매우 흔한 일입니다. 여기저기서 자료를 공유하고 사용하기 위해서 인터넷이 만들어졌으니까요!

 

그래서 몇 가지 예외를 두기로 했는데, 그중 하나가 바로 CORS 정책을 지킨 리소스 요청입니다.

 

이 정책을 지키는 방법은 서버에서 ‘Access-Control-Allow-Origin’ 헤더에 허용할 출처를 기재해서 클라이언트에 응답하는 것입니다. 즉, “https://www.naver.com”에 접근하고 싶다면, 서버는 응답을 보낼 때 header에 이 주소를 기입해 주어야 하는 것이죠!

 

따라서 header, origin, credential 등에 대한 설정을 완료해 준 cors 빈의 초안은 아래와 같습니다.

 

 

현재 preflight용 option 메서드와, 기본적인 http 메서드를 포함하고 있는데요. 이후 기능이 더 복잡해지면 다양한 메서드를 추가해야 할 것으로 보입니다.