CORS preflight

 

dreamhack.io에서 theori.io로 POST 요청을 보낸다.

서로 다른 origin이기 때문에 OPTIONS 메소드로 서버에 요청을 보내도 될지 확인한다.(CORS preflight)

 

Sec-Fetch-Mode: Cors

Sec-Fetch-Site: cross site

 

서로 다른 사이트임을 알려주고, Cors 요청임을 알려준다.

 

Request header를 보면 Connection 필드가 없는데, HTTP/2에서는 따로 명시하지 않는다.

 

다중화(Multiplexing):

하나의 연결에서 여러 요청과 응답 처리 가능. HTTP/2에서는 모든 연결이 기본적으로 지속적이어서 이 헤더는 굳이 명시하지 않는다.

 

 

CORS preflight 요청을 보내면 서버에서 이와 같은 응답이 온다.

 

이처럼 우리가 만약 외부 리소스를 요청하면 브라우저에서 CORS preflight 요청을 먼저 보내고, 서버로부터 요청이오면 브라우저에서 이를 확인하고, 사용자의 실제 리소스를 요청한다.