CORS#

CORS는 Corss-Origin Resource Sharing의 약자로, 서로 다른 출처의 리소스가 상호 작용하도록 허용하는 웹 보안 메커니즘이에요.
웹 브라우저가 다른 웹사이트의 리소스에 접근하도록 허용하는 방식이에요.

위 이미지는 토스의 CORS(교차 출처 리소스 공유)에서 가져왔어요.
이미지 정리가 아주 잘되어 있어서 한눈에 보기 참 좋아요!

CORS는 아래와 같은 목적으로 사용해요.

• API 호출: 웹 애플리케이션이 다른 도메인의 API를 호출할 수 있도록 해요.
• 이미지 및 기타 리소스 로딩: 웹사이트가 다른 도메인의 이미지, CSS 파일, JavaScript 파일 등을 로딩할 수 있도록 해요.
• 실시간 데이터 공유: 웹 애플리케이션이 서로 다른 도메인에서 실시간 데이터를 공유할 수 있도록 해요.

Headers#

요청 헤더와 응답 헤더에 사용되는 CORS 값은 아래와 같아요.

Request headers#

• Origin: 리소스를 요청하는 웹사이트의 도메인과 포트 번호를 나타내요.
• Access-Control-Request-Method: 서버가 허용하는 HTTP 요청 메서드(GET, POST, PUT, DELETE 등)를 나타내요.
• Access-Control-Request-Headers: 실제 요청에서 어떤 HTTP 헤더를 사용할지 서버에게 알려주기 d위해 사용해요.

Response headers#

• Access-Control-Allow-Origin: 서버가 어떤 Origin의 리소스에 대한 접근을 허용하는지 나타내요.
• Access-Control-Allow-Credentials: 서버가 자격 증명(예: 쿠키, 세션 ID)을 포함한 요청을 허용하는지 나타내요.
• Access-Control-Expose-Headers: 응답 헤더 중 클라이언트에서 스크립트가 액세스할 수 있는 헤더를 지정해요.
• Access-Control-Max-Age: 캐시된 CORS 응답의 최대 수명을 지정해요.
• Access-Control-Allow-Credentials: credentials 플래그가 true일 때 요청에 대한 응답을 표시할 수 있는지를 나타내요.
• Access-Control-Allow-Methods: 리소스에 접근할 때 허용되는 메서드를 지정해요.
• Access-Control-Allow-Headers: 서버가 허용하는 HTTP 요청 헤더를 나타내요.

Preflight request#

CORS 관련 내용을 찾아보다 보면 계속 언급되는 단어여서 찾아봤어요. 미리 전송 요청이라고 번역할 수 있을 것 같아요.

preflight request는 OPTIONS 메서드를 통해 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청이 전송하기에 안전한지 확인해요.
cross-origin 요청은 유저 데이터에 영향을 줄 수 있기 때문에 이와같이 미리 전송(preflighted)해요.

When you see a man of worth, think of how you may emulate him. When you see one who is unworthy, examine yourself.

— Confucius