CORS는 왜 필요할까?

프로젝트를 진행 하다보면 종종 프론트엔드와 백엔드의 연결에서 CORS 문제가 발생한다. 특히 백엔드에서 API 개발을 완료하고 프론트엔드와의 테스트를 처음 진행할 때 많이 발생하는 것 같다.

프론트엔드: "해당 API로 요청했는데 안돼요ㅠㅠ" 
백엔드: "분명 테스트는 잘 동작되는데.."

이런 경우 바로 CORS 부터 체크하게 되는 것 같다.

 

본론으로 돌아가서

CORS는 왜 필요할까?

흔히 다양한 document들을 참고해보면 다음과 같이 말한다.

CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 실행되는 JavaScript 코드로 다른 도메인의 리소스를 요청할 때 보안상의 이유로 제한되어 있는 것을 완화하기 위한 매커니즘입니다.

도대체 무슨 말일까. 좀 더 쉽게 풀어보자.

Web B: 저기..서버 A에 데이터 좀 얻을 수 있을까요?
브라우저(크롬 등): 서버 A에게 확인 후 전달 드릴게요! 

웹 페이지(B)에서 Js로 서버 A에게 데이터를 요청하면, 브라우저에서는 서버 A에게 요청을 전달한다. 서버 A는 등록된 설정에 따라 괜찮은지 아닌지 응답한다.

서버 A가 CORS에 설정을 했으면 브라우저에게 OK를 준다

브라우저: (서버 A에게) Web B에가 데이터를 요청하는데 어떻게 할까요?
서버 A: 네, 전달 드릴게요!
브라우저: (Web B에게) 요청하신 데이터 전달 드릴게요!

 

서버 A가 CORS 설정을 하였으나 B가 등록이 되어 있지 않다면 거절한다.

브라우저: (서버 A에게) Web B에가 데이터를 요청하는데 어떻게 할까요?
서버 A: 안됩니다!
브라우저: (Web B에게) 거절당했습니다.

 

만약 서버 A가 CORS 설정을 하지 않았다면 브라우저는 기본적으로 거절한다.

브라우저: (서버 A에게) Web B에가 데이터를 요청하는데 어떻게 할까요?
서버 A: OK.
브라우저: (Web B에게) 거절당했습니다.

CORS 요청이 올 경우, 위 대화내용처럼 흘러간다.

보통 프로젝트에서 CORS 문제가 터지는 것은 클라이언트와 서버가 분리되어 각 주소(origin)이 다르기 때문이다.

이 때 브라우저는 다른 도메인으로 인식하여 클라이언트의 접근을 차단하여 서버를 지켜준다. 

 

CORS는 어디서나 발생할까?

결론적으로는 그렇지 않다. CORS는 오직 브라우저에서만 유효하다. 따라서 우리는 브라우저에서 클라이언트와 서버의 연결을 위해 브라우저에게 다음과 같이 의사를 전달해야 한다.

이 주소는 허락할게 (Access-Control-Allow-Origin: http://localhost:8080)
누구에게나 다 허락할게 (Access-Control-Allow-Origin: *)

브라우저를 제외한 postman, curl 등과 같은 HTTP 클라이언트는 CORS 설정이 없어도 동작한다. 위의 예시에서는 출처(origin)이 존재하지만, 브라우저가 아닌 클라이언트들에게는 origin이라는 개념이 없기 때문에 CORS를 지키지 않는다.