TIL - CORS

케이·2022년 5월 11일

TIL

목록 보기

13/13

아래의 글은 개인 학습을 위해 공식문서와 블로그 등을 정리한 것입니다. 혹시 잘못된 부분이 있어 지적해주신다면 감사하겠습니다🙏🏻

CORS를 알게 된 계기

FE분들과 프로젝트를 진행하다 마주쳤다. 발표를 2시간도 남기지 않은 상태에서 처음보는 403에러와 경고때문에 많이 당황했었다. 다행히 주변분들에게 물어물어 CORS때문에 생기는 이슈임을 알게되어 코드 수정을 할 수 있었다. 하지만.. 발표 10분을 앞두고 또 터진 CORS에러... 왜 터졌을지는 아래에서 설명하겠다..

CORS란?

Cross-Origin Resource Sharing의 줄임말.
CORS를 이해하기 위해선 SOP(Same-Origin Policy)도 알아두면 좋은데..
결국 이 둘이 무엇이냐 하면..
웹이라는 공간에서 다른 곳에 있는 리소스를 가져와서 사용하는 일은 굉장히 흔한일이다. SOP는 말 그대로 '같은 출처에서만 리소스를 공유할 수 있다'라는 규칙을 가진 정책이고 이 때문에 리소스 출처가 다르더라도 사용하는 것이 해당 정책에 위반되는 것이었다. 하지만 위에서 언급했던 것처럼 웹에서 다른 곳의 리소스를 사용하는 일은 흔한 일이라 몇 가지 예외 조항을 두고 리소스 출처가 다르더라도 허용하기로 했는데 그 중 하나가 CORS 정책을 지킨 리소스 요청이다.

(출처: https://developer.mozilla.org/ko/docs/Web/HTTP/CORS)

여기서 중요한 것은 출처를 비교하고 판단하는 것은 브라우저다. (브라우저에 로직이 구현되어 있다고 보는게 맞겠지..)
만약 CORS 정책을 위반하는 리소스 요청을 하더라도 서버는 정상적으로 응답을 한다.
하지만 브라우저가 CORS 정책 위반이라고 판단하면 그 응답을 버려버린다.

단순 요청(Simple Request)

단순 요청은 프리플라이트(미리전송)을 하지 않고 서버에게 바로 요청을 한뒤 서버가 이에 대한 응답 헤더에
Access-Control-Allow-Origin를 포함하면 브라우저가 CORS 정책 위반 여부를 검사하는 방식이다.
예를 들어 Access-Control-Allow-Origin=* 이라고 응답이 온다면 모든 도메인에서 접근할 수 있음을 의미한다. 특정한 곳에서의 요청만 접근을 허용하고 싶은 경우에는 Access-Control-Allow-Origin = 주소를 적어주면 된다.

단순요청은 다음 조건들을 모두 충족하는 요청이어야 하는데
1. 요청 메서드는 GET, HEAD, POST 중 하나여야 한다.
2. 유저 에이전트가 자동으로 설정 한 헤더 외에 Accept, Accept-Language, Content-Language, Content-Type (Fetch 명세에서 “CORS-safelisted request-header”로 정의한 헤더)를 제외한 헤더를 사용하면 안된다.
3. Content-Type을 사용하는 경우에는 application/x-www-form-urlencoded, multipart/form-data, text/plain만 허용된다.

프리플라이트(Preflight)

CORS 명세는 브라우저가 OPTIONS 메서드에서 프리플라이트를 지원하는 메서드를 요청하고 서버의 허락이 떨어지면 실제 요청을 보내도록 요구한다.
-> OPTIONS 메서드를 통해 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청이 전송하기에 안전한지 확인한다. (미리 전송)

(출처: https://developer.mozilla.org/ko/docs/Web/HTTP/CORS)