CORS

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

브라우저간의 데이터를 주고받는 과정에서, 도메인 이름이 서로 다른 사이트간에 api 요청을 할 때 CORS를 설정하지 않았다면 CORS 에러가 발생한다.

CORS의 동작

1. HTTP 프로토콜을 사용하여 다른 출처의 리소스를 요청할 때, 요청 헤더(request 헤더)에 Origin 필드에 요청을 보내는 출처를 담아 전송한다.
   • 위에 예시에서는 foo.com 을 담아 전송한다
2. 서버에서는 요청에 대한 응답을 하는데, 응답 헤더 (response header)에 Access-Control-Allow-Origin 이라는 값에 '이 리소스를 접근하는 것이 허용된 출처'를 내려준다. 이후 응답을 받은 브라우저는 자신이 보냈던 요청의 Origin과 서버가 보내준 응답의 Access-Control-Allow-Origin을 비교해 본 후 이 응답이 유요한 응답인지 아닌지를 결정한다.
   • 위에 예시에서는 Access-Control-Allow-Origin에 foo.com을 담아준다.

request 헤더에는 Origin이 response헤더에는 Acess-Control-Allow-Origin헤더가 있어야 한다.

CORS 동작의 시나리오

Preflight Request

: 요청을 한번에 보내는 것이 아니라 예비 요청과 본 요청으로 나누어서 서버를 전송하는 방법을 말한다. 본 요청을 보내기 전 미리 예비로 보내는 요청을 Preflight라고 하며, HTTP 메서드 중 하나인 OPTIONS 메서드를 사용한다.

• 예비 요청을 함으로써 본 요청에 대한 안정성을 확인 할 수 있다. 예비 요청으로 서버는 현재 자신이 어떤 것들을 허용하고, 어떤 것들(출처)를 금지하는지에 대한 정보를 응답 헤더에 담아서 브라우저에게 다시 보내준다.

Siple Request

Preflight 요청과는 달리, 예비 요청을 보내지 않고, 서버에게 바로 본 요청을 전송한다

이때 서버의 응답해더에 Access-Control-Allow-Origin 과 같은 값을 보내주면 이때 브라우저가 CORS 정책 위반 여부를 검사한다

위반여부

• 요청의 메소드는 GET, HEAD, POST 중 하나여야 한다
• Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width 외의 다른 헤더를 사용하면 안된다.
• 만약 **Content-Type**를 사용하는 경우에는 application/x-www-form-urlencoded, multipart/form-data, **text/plain**만 허용된다.

Credentialed Request

인증된 요청을 사용하는 방법이다.

다른 출처 간 통신의 좀 더 보안을 강화하고자 할 때 사용한다. 브라우저가 제공하는 비동기 리소스 요청 API인 XMLHttpRequest 객체나 **fetch API**는 별도의 옵션 없이 브라우저의 쿠키 정보나 인증과 관련된 헤더를 함부로 요청에 담지 않는다. 이때 요청에 인증과 관련된 정보를 담을 수 있게 해주는 옵션이 바로 credentials 옵션이다.

credentials도 세가지 옵션을 가지고 있다.

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

다른 출처 사이트로부터 쿠키와 같은 인증정보를 포함시키고자할 때 credentials: 'include' 옵션을 넣어준다. 

동작 조건

• Access-Control-Allow-Origin: * 이면 안되며 명시적으로 URL을 적어야한다
• 응답 헤더에는 반드시 Access-Control-Allow-Credentials: true 가 존재해야한다.

출처 :

https://velog.io/@pilyeooong/CORS란-무엇인가

https://zzossig.io/posts/web/what_is_cors/