1. CORS란?
CORS란 Cross-Origin-Resource-Share의 약자로 다른 출처 간의 리소스 공유를 위한 정책이라고 해석할 수 있다.
CORS는 추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.
2. Origin이란 무엇인가?
https://www.naver.com:443 /path/page?뭐시기/등등등
https://를 Protocol
www.naver.com을 Host
:443을 Port라고 하고
뒤에 Path, Query String Fragment등 이 있다.
위의 URL에서 Protocol, Host, Port를 합친 https://www.naver.com:80를 Origin이라고 한다.
3. SOP란?
CORS를 알기 위해서는 SOP라는 개념을 알아야 한다.
SOP는 Same Origin Policy의 줄인 말로 같은 Origin끼리만 송수신 한다는 정책이다.
즉 다른 출처의 리소스를 사용하는 것을 제한 하는 보안 방식이다.
만약에 다른 Origin에서 접근을 하려면 CORS에러가 발생하게 되는 것이다.
4. CORS 접근 제어 시나리오
가. 단순요청(Simple Request)
나. 프리플라이트 요청(Preflight Request)
다. 인증정보 포함 요청(Credentialed Request)
5. 프리플라이트 요청
사전확인 작업이라고 생각하면 된다.
현실적인 예를 들어 설명하면
A가 B의 집에 방문하는 절차를 생각해보면 된다.
A가 바로 B의 집에 들어가는 것은 민폐이다.
그렇기 때문에 A는 B에게 의사를 물어본다.
A : B야 너네집에 놀러가도 되겠니?프리플라이트 요청은 이러한 요청을 Options 메소드를 통해서 확인을 한다.
이 작업을 두 번 하게 된다.
그림으로 보면 이렇게 된다.
요청시
Origin : 요청 출처
Access-Control-Request-Method : 실제 요청의 메서드
Access-Control-Request-Headers : 실제 요청의 추가 헤더
응답시
Access-Control-Allow-Origin : 서버 측 허가 출처
Access-Control-Allow-Methods : 서버 측 허가 메서드
Access-Control-Allow-Headers : 서버 측 허가 헤더
Access-Control-Max-Age : Preflight 응답 캐시 시간
Access-Control-Max-Age은 사전 요청이 2번 이루어지니까 서버의 부하를 최소화 하기 위해서 origin과 header에 대한 응답을 캐싱해주는 기간을 말한다.
이미 예전에 한 번 보낸 사전요청과 동일한 사전요청이 날라가면 리소스 낭비를 줄이기 위해서 캐싱해 두었다가 동일한 사전요청을 다시 보내면 바로 본 요청으로 보내게 된다.
프리플라이트 요청의 특징
응답코드는 200대여야 하며 응답 바디는 비어 있는 것이 좋다.
6. 단순 요청
프리플라이트 요청 없이 바로 요청을 날린다.
다음 조건을 모두 만족해야 한다.
- GET, POST, HEAD 메서드 중 하나여야 하며
- Content-Type은
application/x-www-form-urlencoded
multipart/form-data
text/plain
셋 중 하나여야 하며
- 헤더는 Accpet, Accept-Language, Content-Language, Content-Type 만 허용된다.
이런 모든 조건이 완성되어야 단순요청이 보내진다.
7. 왜 그럼 프리플라이트 요청을 보내는 것일까??
CORS를 모르는 서버도 있기 때문이다.
위의 그림과 같이 실제 서버와 클라이언트에서의 차이가 발생할 수 있기 때문에 프리플라이트 요청을 통해 확인한다.
