cors 쉽게 이해하기

 

CORS란?

출처 :   https://medium.com/@baphemot/understanding-cors-18ad6b478e2b

Cross-Origin Resource Sharing (CORS)은 추가 HTTP 헤더를 사용하여 브라우저가  실행 중인 웹 애플리케이션에 선택된 액세스 권한을 부여하도록 하는 메커니즘입니다. 다른 출처(도메인, 프로토콜 또는 포트)의 자원 및 리소스를 요청할 때 cross-origin HTTP 요청을 실행합니다.

과거에 보안 상의 이유로, 브라우저들은 스크립트 내에서 cross-origin HTTP 요청을 제한했었습니다. 예를 들어, XMLHttpRequest and the Fetch API는 same-origin 정책을 따랐습니다. 

 

다른 API의 응답에 올바른 CORS 헤더가 포함되어 있지 않으면 해당 API를 사용하는 웹 응용 프로그램은 동일한 출처의 리소스(같은 도메인, 같은 포트)만 요청할 수 있습니다. 

 

서버의 기본 설정(프레임워크 및 언어마다 다를 수 있습니다.)에서 CORS_ORIGIN_ALLOW_ALL를 활성화했을 경우 CORS의 요청을 허용하여 응답합니다. 

 

- CORS의 최종 주체는 서버입니다. 브라우저에서는 언제든지 CORS를 허용을 할 수 있습니다. 브라우저의 옵션(크롬의 경우 chrome://flags/), CORS 확장프로그램은 해당 옵션을 수정 및 요청 시 헤더에 "Access-Control-Allow-Origin"을 추가하는 역할을 합니다. 

- 서버에서 CORS의 설정을 허용하지 않았다면 JSONP와 같은 우회를 사용기도 했습니다. (단 GET통신밖에 할 수 없습니다.)

CORS 동작 방법

CORS 메커니즘은 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원합니다. HTTP OPTIONS 요청 메서드를 이용해 서버로부터 지원 중인 메서드들을 내려받은 뒤, 서버에서 "approval"(승인) 시에 실제 HTTP 요청 메서드를 이용해 실제 요청을 전송하는 것을 말합니다. 서버들은 또한 클라이언트에게 (Cookie와 HTTP Authentication 데이터를 포함하는) "credentials"가 요청과 함께 전송되어야 하는지를 알려줄 수도 있습니다.

출처 :  https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

1. 브라우저에서 다른 도메인의 서버로 options 메서드로 전송합니다. ( preflight requests )

2. 서버의 설정이 access-control-allow-origin이 허용일 경우 OK를 리턴합니다. 

3. OK이며, 사용 가능한 http  메소드 라면, 요청하려는 API를 서버 측에 호출합니다. 

4. 서버에서 응답합니다. 

 

이렇게 2번의 통신이 클라이언트와 서버에서 일어나게 됩니다. 

- options으로 확인하는 것은 http  메서드 중 멱등성이 없는 메소드로 확인 및 리턴으로 해당 API로 사용할 수 있는 메서드를 리턴하여 요청을 수행할 수 있는지를 확인하기 위함입니다.  

CORS 확인할 점

Content-Type헤더에 허용되는 유일한 값은 다음과 같습니다.
* application/x-www-form-urlencoded
* multipart/form-data
* text/plain

- 많이 사용하는 application/json는 사용할 수 없습니다. 

현재 CORS를 지원하는 브라우저는 다음과 같습니다. (IE하위 버전을 제외하고 전부 지원됩니다.)

 

 

의문점 
* 왜 option으로 확인을 꼭 해야 하는가? (http3가 논의되는 시점에서 통신비용을 무시할 수 없을 텐데..)
* 왜 application/json content-type을 허용하지 않는가? 

 

 

 

참고 및 읽으면 좋은 글들

https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

https://auth0.com/blog/cors-tutorial-a-guide-to-cross-origin-resource-sharing/

https://developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS

https://www.popit.kr/cors-preflight-%EC%9D%B8%EC%A6%9D-%EC%B2%98%EB%A6%AC-%EA%B4%80%EB%A0%A8-%EC%82%BD%EC%A7%88/

https://developer.mozilla.org/ko/docs/Glossary/safe