[CORS란]

CORS란

도메인 또는 포트가 다른 서버의 자원을 요청하는 방식

 

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)은 추가 HTTP 헤더를 사용하여 한,출처에서 실행중인 웹 어플리케이션이 다른 출처에 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

 

Cors는 브라우저와 서버간 안전한 교차 및 출처 요청 및 데이터 전송을 지원한다. 
웹 어플리케이션은 자신의 출처와 다를때, Cors HTTP요청을 실행한다.

 

CORS의 동작원리

 

1. 웹브라우저는 다른 출처의 리소스를 요청할때 HTTP 프로토콜을 사용하여 요청을 보낼떼 요청 헤더(request header)에 Origin 필드에 요청을 출처를 담아 전송한다.

 

2. 서버는 응답 헤더 (response header)에 Access-Control-Allow-Origin이라는 값에 '리소스를 접근하는 것이 허용된 출처'를 내려준다.

3.이후 응답을 받은 브라우저는 자신이 보냈던 요청 Orgin과 서버가 보내준 응답의 Access-Contorl-Allow-Origin을 비교한 후 유효성 응답인지 결정한다.

 

CORS의 시나리오

Prefilght Request
Prefilght 방식은, 요청을 한번에 보내는 것이 아니라 예비 요청과 본 요청을 나누어서 서버에 전송 한다.
예비로 보내는 요청을 Preflight라고 하며, HTTP 메서드 중 하나인  OPTIONS 메서드를 사용한다.

 

예비요청을 보내면서 브라우저가 요청 보내는것에 대한 안정성을 확인한다.

 

Simple Request
서버에게 바로 본 요청을 전송한다.이 후 서버가 응답 헤더에Access-Control-Allow-Origin과 같은 값을 보내주면 그때 브라우저가 CORS 정책 위반 여부를 검사하는 방식이다.

 

🌫 동작조건

1. 메소드는 GET,HEAD,POST 중 하나다.
2.AcceptAccept-Language,Content-Language, Content-Type, DPR, Downlink,Save-Data, Viewport-Width, Width 의 헤더만 사용한다.
3.Content-Type를 사용하는 경우에는 application/x-www-form-urlencoded, multipart/form-data, text/plain만 허용한다.

2. Authoriztion 헤더만사용하더라도 Simple Request에 해당되지 않는다.

3. 최근 들어 REST API도 text/xml이나 application/json의 타입을  주로 사용하기 때문에 Simple Request가 어렵다.

 

Credentialed Request
인증된 요청을 사용하는 방법이다. 브라우저가 제공하는 비동기 리소스 요청 API인  XMLHttpRequest 객체나 
fetch API 는 별도의 옵션 없이 브라우저의 쿠키 정보나 인증과 관련된 헤더를 함부로 요청에 담지 않는다. 인증과 관련된 정보를 담을 수 있게 해주는 옵션이 바로 credentials 옵션이다.

 

credentials도 3️⃣ 가지 옵션

same-origin : 같은 출처 간 요청에만 인증 정보를 담을 수 있다.
include : 모든 요청에 인증 정보를 담을 수 있다.
omit : 모든 요청에 인증 정보를 담지 않는다.

 

➡️  다른 출처 사이트로의 요청에 쿠키와 같은 인증정보를 포함시키고자 한다면 ?

credentials: 'include' 옵션을 추가하면 된다. 

 

✔️ 동작 조건
1. Access-Control-Allow-Origin: * 이 불가능하며 명시적인 URL을 설정해야한다.
2. 응답 헤더는 반드시Access-Control-Allow-Credentials: true 가 존재해야한다.

 

출처

필영블로그