evan-moon의 CORS는 왜 이렇게 우리를 힘들게 하는걸까?를 공부하며 작성했습니다.

CORS란?

CORS는 “Cross + Origin + Resource + Sharing”으로, 최초 자원이 서비스된 도메인(same-origin) 밖의 다른 도메인(cross-origin)에서 리소스를 요청하는 것을 허용하는 것이다.

cross-origin은 scheme, host name, port 중 하나라도 다를 때를 의미한다.

CORS의 동작 방식은?

웹 클라이언트 어플리케이션은 cross-origin의 리소스를 요청하기 위해 HTTP 프로토콜을 사용한다. 이때 요청 헤더에 Origin이라는 필드에 출처를 함께 담아 보낸다.

Origin: https://abcd.com

서버는 이에 대한 응답으로 Access-Control-Allow-Origin에 “이 리소스에 접근이 허용된 출처”를 보낸다. 브라우저는 Origin과 Access-Control-Allow-Origin을 비교하여 유효 응답인지를 결정한다.

Simple Request

GET, HEAD와 같은 서버 상태를 조회하는 요청이다. 브라우저는 본 요청을 바로 서버에게 보낸 후, 서버의 응답 헤더 값을 확인하여 CORS 정책 위반 여부를 확인한다.

• 사진 출처 : https://evan-moon.github.io/2020/05/21/about-cors/#sopsame-origin-policy

Simple Request를 사용할 수 있는 조건

1. 요청 메소드가 GET, HEAD, POST 중 하나이다
2. Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width 를 제외한 헤더를 사용하면 안된다
3. Content-Type은  application/x-www-form-urlencoded, multipart/form-data, text/plain만 된다.

위와 같은 조건이 맞지 않을 경우, Preflight Request를 사용할 수 있다.

Preflight Request

브라우저는 OPTION 메소드를 통해 임시 요청을 보내고, 서버는 CORS 헤더로만 응답한다. 이를 통해 브라우저 스스로 요청이 안전한 것인지 확인한다. 만약, CORS 헤더가 요청과 맞지 않으면 요청을 폐기한다.

• 사진 출처 : https://evan-moon.github.io/2020/05/21/about-cors/#sopsame-origin-policy

1. 리소스를 불러오기 위해 fetch() API를 사용
2. 브라우저가 Origin을 포함한 헤더를 서버에게 예비 요청을 전송
3. 서버가 Access-Control-Allow-Origin을 헤더에 포함하여 어떤 것을 허용하고 금지하는지 브라우저로 알려줌
4. 브라우저는 예비 요청과 서버 응답의 허용 정책을 비교한 뒤, 요청을 보내는 것이 안전하다고 판단하면 요청을 보내고 아닌 경우 요청을 폐기
5. 서버에게 요청을 보낸 경우, 서버가 요청의 응답으로 리소스를 넘겨줌

참고자료

https://evan-moon.github.io/2020/05/21/about-cors/#sopsame-origin-policy