CORS / OPTIONS / preflight

CORS

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

 

→ 앱을 이용하는 사용자를 보호하기 위한 보안조치

 

OPTIONS 메소드

 

OPTIONS 메소드는 target 리소스와 혹은 서버와 통신하기 위한 통신 옵션을 확인할 때 사용된다.

즉, 해당 타겟 서버나 리소스가 어떤 method, header, content type 를 지원하는지 알 수 있다.

통신을 할때 OPTIONS 를 지정해주지 않는다면 네트워크 탭에서 pending 상태로 존재하는 것을 확인할 수 있다.

→ 다른 오리진에서 접근을 했을때는 preflight를 진행해주어야 하는데 이때 OPTIONS가 필요함.

→ 그 이후에 CORS 오류가 나는것을 확인할 수 있다.

 

const defaultCorsHeader = {
  'Access-Control-Allow-Origin': '*', // 어떤 포트를 허용할 것인가 // EX) 127.0.0.1:5500
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, Accept',
  'Access-Control-Max-Age': 10
};

 

 

좌 : Preflight 이후 POST를 진행하는 것까지. 우 : 전체적인 FLOW

Preflight

서버쪽에 뭔가를 하기전에, 서버쪽으로부터 허락을 받기 위해 모의로 진행하는 내용 ("서버야 나 이거해도 되니.")

 

(좌측의 그림부터보자)

 

1. OPTIONS 메소드를 사용하여 통신옵션을 확인한다. (상세한 코드가 들어있는 xml은 보내지 않는다) 
2. 두번째 화살표를 보면 서버쪽에서 http://foo.example라는 도메인이면 허락하고, POST, GET, OPTIONS라는 메소드를 사용하게 허락하겠다 라는 내용을 볼 수 있음
3. 허락을 받은 뒤 세번째 화살표에서 진짜로 내용을 POST하는 것임.
4. 네번째는 허락해준대로 해왔으니 OK사인   

 

(우측의 그림으로 넘어오자)

1. js를 이용하여 xhr을 브라우저로 보낸다.
2. 브라우저 측에서 자동으로 서버에 Preflight Request를 보낸다 (Simple Request가 아닐때) 
3. 서버에서 도메인, 옵션등을 확인하고 허락해도될시, 사용가능한 method, header, content type를 알려준다.
4. 이제 진짜로 브라우저에서 실질적인 내용을 보낸다.
5. 일전에 알려준 기준에 부합할때 OK 사인을 보낸다.
6. 그 뒤 브라우저는 onload 또는 onerror로 표시해준다.