[CS공부] CORS (Cross Origin Resource Sharing)에 대하여

백엔드와 프론트엔드가 서로 연결을 할 때 항상 발생하는 문제인 CORS 에러에 대해 알아보려고 합니다.

CORS는 Cross Origin Resource Sharing의 줄임말로 교차 출처 자원 공유를 뜻합니다.

프론트엔드와 백엔드가 서로 다른 곳에서 요청을 주고 받기 때문에 필요한 부분이라고 할 수 있습니다.

CORS를 이해하기 위해서는 Origin의 뜻을 이해하고 넘어가야 합니다.
Origin은 웹 사이트의 주소인 URL에서 프로토콜, 도메인, 포트 번호를 다 합친 것을 의미합니다.
포트 번호 80은 대부분 생략하여 나타냅니다.

 

 

동일 출처 정책이라고 하는 SOP(Same Origin Policy)에 의해서 동일한 origin의 요청만 보낼 수 있게 되는데
기술 발전으로 인해 다른 origin과의 연결도 필요해졌습니다.
이로 인해 CORS 정책이 생겨난 것이며 SOP에 의해 막히게 될 요청을 풀어준다고 보면 됩니다.

쉽게 말하면 보안의 문제로 SOP에 의해 막히게 될 접근이 CORS 정책을 지정하여 접근할 수 있게 해주는 겁니다.

다른 출처 요청 3가지

CORS 정책을 통해 다른 출처에서 요청을 할 때에는 3가지 정책이 존재합니다.

 

 

1. 단순요청 (Simple Request)

클라이언트에서 서버로 요청을 보내는 간단한 요청입니다.
GET, HEAD, POST 중 하나의 메서드를 사용합니다.
사용자 정의 헤더(custom header)를 포함하지는 않습니다.
CORS에 의해 요구되는 특정 Content-Type으로 요청 데이터를 보내지 않습니다.

 

2. 프리 플라이트 요청(Preflight Request)

단순요청의 조건을 만족하지 않는 경우에 클라이언트에서 서버로 보내는 사전요청입니다.
사전 요청에서 응답이 가능하다고 답변을 받아야 실제 요청을 보낼 수 있게 됩니다.

클라이언트에서 서버로 요청을 보낼 때에는 3가지 값이 포함됩니다.
● Origin - 어디서 요청을 보냈는지 알려주는 주소
● access-control-request-method - 실제 요청을 보낼 메서드
● access-control-request-headers - 실제 요청의 헤더부분

그리고 나서 서버에서 응답을 할 때에는 4가지 값이 포함됩니다.
● access-control-allow-origin - 서버에서 허용하는 출처  
● access-control-allow-methods - 서버에서 허용하는 메서드 리스트  
● access-control-allow-headers :- 서버에서 허용하는 헤더의 리스트  
● access-control-max-age - 요청의 응답을 캐시에 저장하는 시간

 

3. 신용 요청(Credentialed Request)

신용 요청의 경우에는 클라이언트에서 서버로 보내는 요청에 사용자 인증 정보가 있는 경우입니다.
이 때에는 클라이언트와 서버 모두 추가적인 설정이 필요합니다.
서버 측에서는 Access-Control-Allow-Credentials 헤더 부분을 True로 설정하여서 신용 요청을 허용합니다.

클라이언트 측에서도 withCredentials 속성을 True로 설정해줘야 인증 정보를 포함 시켜 요청을 보낼 수 있습니다.

 

문제를 일으킨다고 생각한 CORS 정책은 사실 보안 문제를 해결하고 기존의 SOP 정책으로 인한 문제를 해결하는...

좋은 정책이었습니다.

 

더 알아보고 매번 제작할 때 마다 고민해야 겠습니다.