📕 CORS

• 다른 출처간(웹사이트, API주소)의 리소스(주고 받는 데이터)를 추가 HTTP 헤더를 사용해 다른 출처의 리소스에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

작동방식

1. 요청에 Origin이라는 header(받는 쪽의 IP주소, 사용할 프로토콜...)를 추가 (scheme(요청할자원의 접근방법 http,ftp...), 도메인, 포트) 해서 API로 보낸다.
2. API서버는 답장 header에 지정된 ACAO 정보를 실어서 보낸다.
3. 브라우저가 origin에서 보낸 출처값이 서버의 답장 헤더에 담긴 ACAO에 똑같이 있으면 리소스를 공유해준다.

출처(origin)이란 ?

📗 CORS의 종류

Simple Request

• 브라우저에서 본 요청을 바로 보내며 서버에서는 추가적인 처리 없이 요청을 처리할 수 있습니다.

Preflight Request

• 본 요청을 보내기 전에 서버가 본 요청을 수락할 수 있는지 확인하기 위한 과정, 요청에 의해서 서버 정보가 바뀔 수 있기 때문에.
• HTTP 메서드 중 OPTIONS 메서드를 사용하며, 브라우저는 이에 대한 응답으로 서버가 허용하는 메서드, 헤더, 출처 등에 대한 정보를 받아옵니다.

SOP(Same Origin Policy)

• SOP는 같은 출처에 속하는 리소스끼리는 자유롭게 상호작용할 수 있도록 허용하고, 다른 출처의 리소스에는 접근할 수 없도록 제한
• XSS(Cross-Site Scripting) 공격과 CSRF(Cross-Site Request Forgery) 공격을 방지하는 데 중요한 역할

ACAO(Access-Control-Allow-Origin)

• CORS(Cross-Origin Resource Sharing)에서 서버에서 브라우저로 응답을 보낼 때 허용되는 출처(origin)를 설정하는 HTTP 헤더
• 서버에서 브라우저로 보내는 응답에 포함되며, 브라우저는 이를 통해 자신이 요청한 리소스가 허용된 출처에서 온 것인지 확인

📎 참고영상

• 웹개발 짜증유발자! CORS가 뭔가요?
  
• [10분 테코톡] 🌳 나봄의 CORS