프로젝트에서 API서버를 따로 생성하여 프론트엔드와 통신했다.
그런데 요청한 메소드 이전에 Request Method: OPTIONS
요청이 네트워크탭에 있는 것을 확인했다.
통신 Type도 XMLHttpRequest (XHR)
가 아닌 preflight
으로 되어있다.
확인해보면 응답값은 없는데, 뭐하는거지?
preflight인 OPTIONS 요청은 서버와 브라우저가 통신하기 위한 통신 옵션을 확인하기 위해 사용한다.
서버가 어떤 method, header, content type을 지원하는지를 알 수 있다.
브라우저가 요청할 메서드와 헤더를 허용하는지 미리 확인한 후, 서버가 지원할 경우에 통신한다. 좀 더 효율적으로 통신할 수 있다.
터미널에서 확인해볼 수 있다.
curl -X OPTIONS https://API서버 -i
라는 요청을 서버에 보내면 다음과 같은 응답이 나온다.
HTTP/1.1 204 No Content
...
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
...
서버에서 허용하는 메소드를 알수있다.
CORS 동작에서도 Options요청이 사용되는데, 먼저 Options요청을 보낸 뒤 응답 정보를 사용 가능한지 파악한다. 서버의 "허가"가 떨어지면 실제 요청을 보내도록 요구하고, 또한 서버는 클라이언트에게 요청에 "인증정보"(쿠키, HTTP 인증)를 함께 보내야 한다고 알려줄 수도 있습니다.
허용되지 않는 요청의 경우, 405(Method Not Allowed)
에러를 발생시키고 실제 요청은 전송하지 않게된다.
GET
, HEAD
, POST
요청이 아닌 경우Content-Type
이 application/x-www-form-urlencoded
, multipart/form-data
, text/plain
이 아닌 경우preflight를 발생하지 않는다면, simple requests를 요청할 수 있다.
우선 preflight은 보안을 위한 절차이지만, 경우에 따라 응답속도가 중요하다면 발생하지 않도록 하는 것이 좋다.
application/json
를 사용하기 때문에... 발생하게 된다.참고 : MDN CORS
잘 읽었습니다.