4. CORS

Same-Origin 정책

스크립트에서 발생한 HTTP 요청은 Same-Origin 정책을 준수해야 한다. 여기서, Same-Origin 요청은 요청 해더 Origin 속성에 표기되어 있는 도메인을 제외한 다른 출처의 리소스와의 상호작용을 제한하는 정책이다. 다른 출처로 판단되는 도메인의 경우, Origin과 웹 프로토콜, 호스트, 포트번호가 다른 경우를 말한다.

CORS(Cross Origin Resource Sharing, 교차 출처 리소스 공유)

타 도메인과의 자원 공유가 많아져 우회적인 방식으로 다른 출처의 리소스를 요청하는 수요가 증가하자, 이를 방지하고자 공식적인 방법을 제공한다.

preflight 요청

CORS를 허용하기 위한 요청으로, 서버의 엔드포인트가 허용하는 메서드, 해더를 사전에 확인하고, 본 요청을 보내기 전 브라우저 스스로 이 요청을 보내는 것이 안전한지를 확인하기 위한 요청이다. OPTION 메서드를 통해 사전 요청을 보내고 응답을 확인한다.

OPTION 요청에 대한 응답 해더는, Header, content-type, Allow method, Access-Control-Allow-Origin 등의 정보를 전달받는다. 서버가 전달받은 요청에 대해 정상적인 요청인지 판단하고, 정상적인 요청일 때 응답해더에 요청을 보낸 클라이언트의 Origin을 Access-Control-Allow-Origin 에 기입한다.

클라이언트는 Access-Control-Allow-Origin에 자신의 Origin이 포함되어 있는지 판단하고, 본 요청을 전달한다.

단순 요청

단순 요청의 경우 preflight 요청을 보내지 않는다. 사전 요청 없이 본 요청을 서버로 보내고 서버가 이에 대한 응답 해더의 Access-Control-Allow-Origin를 통해 CORS 정책이 위반되었는지 그제서야 확인하는 방식이다.

하지만, 단순 요청은 다음과 같은 조건을 모두 충족하고 있어야 한다.

1. 요청의 메서드는 GET, HEAD, POST 중 하나여야 한다.

2. 유저 에이전트에서 자동으로 설정한 해더 + 다음과 같은 해더를 제외한 나머지 해더를 불허한다.

   1. Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width

   2. Content-Type을 사용하는 경우, application/x-www-form-urlencoded, multipart/form-data, text/plain만 허용된다.

CORS 허용 방안

일반적으로 서버에서 요청을 허용할 클라이언트의 Origin을 Access-Control-Allow-Origin에 담아 보내주는 것이 정석적이다.

그 외 프록시 서버를 통해 요청에 대한 응답에 Access-Control-Allow-Origin를 임의로 추가하여 응답을 받는 방법이 있다. (ex. webpack dev server로 타겟 도메인, origin 변경 옵션을 선택하여 우회할 수 있다.)