CORS | Atelier

type

status

date

slug

summary

SOP(Same-Origin Policy)

💡

웹 페이지가 같은 도메인의 리소스만 접근할 수 있도록 제한하는 정책

Origin 은 Protocol+Host+Port 가 합쳐진 것

CORS(Cross-Origin Resource Sharing)

💡

웹 페이지가 다른 도메인의 리소스도 접근할 수 있도록 허용하는 정책

CORS 시나리오

Simple Request(단순 요청)

특정 조건을 충족하는 요청에 적용됩니다. 이러한 요청은 GET, HEAD, POST 메서드 중 하나를 사용하며, 특정 헤더만 사용할 수 있습니다. Content-Type 헤더는 application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나의 값만 가질 수 있습니다. 예비 요청(Preflight) 없이 서버에 직접 보내집니다.

Preflight Request(예비 요청)

브라우저가 본 요청을 보내기 전에 서버에게 예비 요청을 보내는 경우에 적용됩니다. OPTIONS 메서드를 사용하며, 서버는 이 예비 요청에 대한 응답으로 현재 자신이 어떤 것들을 허용하고 금지하는지에 대한 정보를 응답 헤더에 담아 브라우저에게 다시 보내줍니다

예비 요청이 시작됩니다.

브라우저는 서버에게 예비 요청을 보냅니다. 이 예비 요청은 OPTIONS 메서드를 사용합니다.

서버는 이 예비 요청을 처리하고 응답을 준비합니다.

이 응답에는 Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers 헤더가 포함되어 있습니다.

브라우저는 이 응답을 검사하여 CORS 정책을 준수하는지 확인합니다.

이 과정이 완료되면 예비 요청이 완료됩니다.

브라우저는 본 요청을 보냅니다. 이 본 요청은 GET, POST, PUT 등의 메서드를 사용할 수 있습니다.

서버는 이 본 요청을 처리하고 응답을 준비합니다.

이 응답에는 Access-Control-Allow-Origin 헤더가 포함되어 있습니다.

마지막으로, 브라우저는 이 응답을 검사하여 CORS 정책을 준수하는지 확인합니다.

Credentialed Request(인증 정보가 포함된 요청)

웹 애플리케이션에서 다른 출처의 리소스를 요청할 때 쿠키나 HTTP 인증과 같은 인증 정보를 함께 보내야 하는 경우에 적용됩니다. 서버는 Access-Control-Allow-Credentials 헤더를 포함해야 하며, 클라이언트는 XHR, Fetch 또는 Ajax 요청의 credentials 모드를 설정해야 합니다

예비 요청이 시작됨

브라우저는 서버에게 예비 요청을 보냄. 이 예비 요청은 OPTIONS 메서드를 사용함

서버는 이 예비 요청을 처리하고 응답을 준비함

이 응답에는 Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers 헤더가 포함됨

브라우저는 이 응답을 검사하여 CORS 정책을 준수하는지 확인함

이 과정이 완료되면 예비 요청이 완료됨

브라우저는 본 요청을 보냄. 이 본 요청은 GET, POST, PUT 등의 메서드를 사용할 수 있음

서버는 이 본 요청을 처리하고 응답을 준비함

이 응답에는 Access-Control-Allow-Origin 헤더가 포함됨

마지막으로, 브라우저는 이 응답을 검사하여 CORS 정책을 준수하는지 확인함

Preflight Request 와의 차이점 입니다

요청 헤더에 인증 정보(Cookie) Ok

Access-Control-Allow-Origin 에서 “*” 불가능

Access-Control-Credentials True