CORS

CORS란

• Cross-Origin Resource Sharing, 우리말로는 교차 출처 리소스 공유 입니다.
• 프로토콜, 도메인, 포트 번호 중 하나라도 다른 요청을 Cross-Origin이라고 합니다.
  • 프로토콜, 도메인, 포트 번호가 모두 동일하면 출처가 같다고 표현합니다.
• 브라우저는 기본적으로 보안상의 이유로 Cross-OriginHTTP 요청을 제한하고 있습니다.
• 그래서 Cross-Origin을 하기 위해서는 서버의 동의가 필요합니다. 이처럼 출처가 다른 요청에 대해 서버에게 동의를 구하고 거절하는 과정이 CORS이며 이는 HTTP-header를 이용해 진행됩니다.

CORS 동작방식

• CORS는 요청에 따라 다르게 동작합니다.
  Simple requests: 서버에 바로 요청을 보내는 방법
  preflight requests: 서버에 예비 요청을 보내서 안전한지 판단한 후 본 요청을 보내는 방법

Simple requests

• 다음을 모두 충족하는 요청을 Simple requests라고 합니다.

  • 메서드로 GET,HEAD,POST 중 하나를 사용하며
  • 자동으로 설정한 헤더말고 Fetch 명세에서 CORS-safelisted request-header로 정의한 헤더(Accept,Accept-Language,Content-Language)를 사용하며
  • Content-Type이 application/x-www-form-urlencoded,multipart/form-data,text/plain 중 하나를 사용하는

  요청이 바로 simple request입니다.

• simple requests의 경우 서버에 곧바로 요청을 보내고, 이에 대한 응답으로 서버가 브라우저에게 Access-Control-Allow-Origin 헤더를 다시 전송합니다.

preflight requests

• preflight requests는 실제 리소스를 요청하기 전에 OPTIONS라는 메서드로 요청이 안전한지 확인하고 본 요청을 보내는 방법입니다.
• 브라우저가 OPTIONS메서드로 서버에게 요청을 보내면 서버는 Access-Control-Allow-Origin를 브라우저에게 전달합니다. 브라우저는 리턴받은 Access-Control-Allow-Origin를 보고 안전한지를 판단해 CORS를 수행할 지를 판단합니다.

References

• https://hannut91.github.io/blogs/infra/cors
• https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
• https://beomy.github.io/tech/browser/cors/