CORS(Cross-Origin Resource Sharing)

CORS란

Cross-Origin Resource Sharing으로 교차 출처 리소스 공유라는 뜻이다. 다른 출처에서 리소스를 요청할 때 지켜야하는 정책이다. 여기서 출처(Origin)은 protocol, host, port까지 의미한다.

 

 

CORS HTTP 요청 방식

1. 단순 요청을 보내는 것(Simple Request)
2. 예비 요청을 보내서 확인 후 보내는 것(Preflight)
3. 인증된 요청을 사용하는 방식(Credential Request)

 

Simple Request

예비요청없이 서버에 바로 요청을 보내는 방법이다. 서버에 바로 본요청을 보낸 뒤, 서버는 헤더에 ACCESS-CONTROL-ALLOW-ORIGIN 값 등을 붙혀서 보내주면 브라우저가 CORS 정책 위반 여부를 검사한다.

조건

1. GET, POST, HEAD 요청이어야 한다.
2. 유저 에이전트가 자동으로 설정한 헤더외에, 수동으로 설정할 수 있는 헤더는 Accept, Accept-Language, Content-Language, Content-Type 뿐이다.
3. Content-Type 헤더는 application/x-www-form-urlencoded, text/plain, multipart/form-data 이어야 한다.
4. 요청에 사용된 XMLHttpRequestUpload 객체에는 이벤트 리스너가 등록되어 있지 않아야 한다.
5. 요청에 ReadableStream 객체가 사용되지 않아야 한다.
6. Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-data, Viewport-width, width를 제외한 헤더를 사용하면 안된다.

 

 

Preflight Request

지금 보내는 요청이 유효한지를 확인하기 위해 OPTIONS 메서드로 예비 요청을 보내는 것이다.

왜 Preflight라고 부르는 것인가?

Simple Request와 달리, 먼저 OPTIONS 메서드를 통해 다른 도메인의 리소스로 HTTP 요청을 보내(preflighted) 실제 요청이 전송하기에 안전한 지 확인하기 때문이다.

 

조건

1. PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH 방식을 사용하는 경우
2. 금지된 헤더 이름을 사용하는 경우 - https://fetch.spec.whatwg.org/#forbidden-header-name
3. 요청 페이로드 유형이 text/plain, multipart/form-data 또는 application/x-www-form-urlencoded 이 아닌 경우
4. 하나 이상의 이벤트 리스너가 XMLHttpRequestUpload에 등록되어있는 경우