CORS란

CORS란 Cross-Origin Resource Sharing의 약자입니다. 브라우저에서 다른 출처의 리소스를 공유하는 방법입니다.

출처란 URL 구조에서 살펴본 Protocol, Host, Port를 합친 것을 말합니다. 브라우저 개발자 도구의 콘솔 창에 location.origin을 실행하면 출처를 확인할 수 있습니다.

CORS 동작 원리

Simple Request는 서버에게 바로 요청을 보내는 방법입니다.

단순 요청은 서버에 API를 요청하고, 서버는 Access-Control-Allow-Origin 헤더를 포함한 응답을 브라우저에 보냅니다. 브라우저는 Access-Control-Allow-Origin 헤더를 확인해서 CORS 동작을 수행할지 판단합니다.

Simple Request 조건

서버로 전달하는 요청이 아래의 3가지 조건을 만족해야 서버로 전달하는 요청이 단순 요청으로 동작합니다.

요청 메서드는 GET, HEAD, POST 중 하나여야 합니다.
Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width를 제외한 헤더를 사용하면 안 됩니다.
Content-Type 헤더는 application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나를 사용해야 합니다.

Prreflight 요청은 서버에 예비 요청을 보내서 안전한지 판단한 후에 본 요청을 보내는 방법입니다.

Credentialed Request는 credentials 옵션을 통해 요청에 인증과 관련된 정보를 담아서 함께 보내는 방법입니다. credentials는 다음과 같은 세 가지 옵션을 가지고 있습니다.