[HTTP] OPTIONS 헤더, Preflight, CORS

OPTIONS는 RFC 7231에 명시된 HTTP의 여러 메서드 중 하나이다.

 

아래 표는 HTTP의 각 메서드에서 활용할 수 있는 내용이 정리되어 있다.

OPTIONS는 실제로 우리가 프레임워크나 라이브러리를 사용한다면 직접 사용햘 일은 드물다.

하지만, 현대의 Front와 Back을 나눠 개발하는 흐름에서는 꼭 알아야할 개념이다.

 

HTTP의 OPTIONS Method

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

 

즉, 이 OPTIONS 메서드를 활용하면 해당 타겟 서버나 리소스가 지원하는

method, header, content type을 알 수 있다.

 

주로, 브라우저의 JS가 보내는 Fetch, Axios 요청의 Preflight에서 사용된다고 한다.

그럼 왜 OPTIONS를 사용할까?

이를 알기 위해서는 Preflight를 알아야 한다.

Preflight가 뭔데?

Preflight는 효율적인 통신을 하기 위해 사용된다.

 

만약 대량의 데이터를 서버로 보낸다고 생각해보자

이때, Front에서 여러 처리를 한 뒤, 열심히 Body에 데이터를 파싱하여 담았다.

 

그런데, 서버가 POST 요청을 받아들이지 않는다면? Front는 쓸데없는 일을 한 것이다.

Network Byte Order로 바꾸는 등 서버에 POST 요청을 위해 사용된 전 과정이 의미가 없는 행동이 된다.

 

따라서, 서버에서 어떤 메서드와 어떤 header를 허용하는지 확인하는 과정이 필요하게 되었다.

바로 그 과정에서 사용되는 것이 Preflight에서 수행하고 이때 사용하는 HTTP 메서드가 OPTIONS 메서드가 되는 것이다.

 

흐름 요약

1. 특정 HTTP METHOD로 요청을 보내야 됨
2. 해당 서버로 미리 OPTIONS를 미리 보냄
3. 응답 확인
4. 특정 HTTP METHOD를 지원하면 실제 요청

이제 OPTIONS의 사용 이유를 알게 되었다.

 

좀 더 깊이 OPTIONS에 대해 알아보자

OPTIONS METHOD란?

이제 우리는 Preflight에서 OPTIONS가 사용된다는 것을 알게 되었다.

 

그렇다면 실제 OPTIONS 요청은 어떻게 될까?

 

앞의 내용으로 미루어 보았을 때 OPTIONS 를 curl 요청으로 보내게 된다면,

예상하기로는 Header나 Content-Type, Allow Method 의 정보가 넘어와야 한다.

 

$ curl -X OPTIONS https://server.com -i

라는 요청을 특정 서버에 보냈다고 가정해보자.

그럼 서버는 다음과 같은 응답을 준다.

 

HTTP/1.1 200 OK
Allow: OPTIONS, GET, HEAD, POST
Cache-Control: max-age=604800
Date: Thu, 13 Oct 2016 11:45:00 GMT
Expires: Thu, 20 Oct 2016 11:45:00 GMT
Server: EOS (lax004/2813)
x-ec-custom-error: 1
Content-Length: 0

이러한 정보들을 서버로부터 확인할 수 있다.

따라서, 우리는 Preflight를 비롯한 여러 상황에서 OPTIONS를 사용하게 되는 것이다.

 

이 정보는 CORS에서도 사용될 수 있다. CORS는 먼저 OPTIONS 요청을 보낸 뒤, 해당 정보를 토대로 통신가능 여부를 파악한다.

정리

브라우저의 동작 과정

• GET 요청인지 POST 요청인지 파악
• Content-Type과 Custom HTTP Header를 파악
• OPTIONS 요청을 통해서 서버가 적절한 Access-Control-*(Header, Allow-Origin)를 가졌는지 확인
• 만약, 적절한 Access-Control를 가졌다면 실제 XHR를 트리거
• 적절하지 못하다면 Error 발생

만약 서버에서 Cross Origin 에 대한 적절한 Access Control 을 하지 않는다면,

Preflight 과정에서 Error 를 발생시키고 해당 통신을 수행하지 않게 된다.

 

그래서 CORS 를 해결하기 위해서는 Access Control 에 대한 명시를 해줘야 한다.