❗️배경
Filter 로그를 보는데 항상 같은 요청이 두번 연속으로 와 Filter가 두번 돌고 있음을 깨닫게 되었다.
이를 두고 프론트에서 요청을 두번하는 것인가 VS Filter가 두번 돌게 설정되어있는 것인가로 프론트분과 논쟁하다가 🤣
// JWT 필터
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
// 로그 기록 : 요청 uri
log.info("doFilter JWTFilter, uri : {}", ((HttpServletRequest) request).getRequestURI());
System.out.println(request.getMethod());
.. 코드 생략
요청 메소드를 출력해보고 OPTIONS라는 것을 알게되었다. 어쩐지 첫번째 요청에는 응답이 없더라,, 😭
🎯 여기서 OPTIONS란?
Preflight Request(권한 및 안전 확인용 사전 요청)에 사용되는 메소드이다.
네트워크 요청 시 실제 요청 전에 Preflight인 OPTIONS 요청이 발생하는 경우를 종종 볼 수 있는데 이러한 OPTIONS 요청은 서버와 브라우저와 통신하기 위한 통신 옵션을 확인하기 위해 사용한다. 이는 서버가 어떤 method, header, content-type을 지원하는지를 미리 알아내어 거부 당할 통신 옵션의 로직들을 불필요하게 실행시키지 않을 수 있어 더 효율적인 통신이 가능하다고한다.
- CORS(Cross Origin Resource Sharing)
위의 Preflight요청이 발생하는 상황은 CORS와 관련이 있으나 모든 CORS 상황에서 발생하는 것은 아니다.
📌 OPTIONS가 발생하는 경우
GET,HEAD,POST요청이 아닌 경우- Custom HTTP Header가 존재하는 경우
- user agent에 의해 자동으로 설정되는(Connection, User-Agent, Fetch 스펙상 forbidden header로 정의되어 있는) 헤더외에 CORS-safelisted request-header로 명시된 (Accept, Accept-Language, Content-Language, Content-Type 등) 헤더들만 포함된 경우를 제외한 경우
Content-Type이application/x-www-form-urlencoded,multipart/form-data,text/plain이 아닌 경우
📌 OPTIONS 발생하지 않도록 하고자 한다면,
우선 preflight은 보안을 위한 절차이지만, 경우에 따라 응답속도가 중요하다면 발생하지 않도록 하는 것이 좋다.
- CORS상황이 되지 않도록 웹서버와 동일한 오리진을 사용한다.
- 보통 API서버와 프론트엔드가 분리된 경우가 많다. 이런 경우, 브라우저에서 보내는 요청을 웹서버와 동일한 서버에서 받아주는 중간 서버를 두어서 실제 API서버로 전달해주면 된다.
- 위의 Preflight 발생 조건을 없앤다.
- 인증관련해서 헤더에 추가해야할게 있는 경우에도 발생할 수 밖에 없다.
이번 프로젝트는 프론트와 웹서버가 동일한 오리진을 사용하고 있지 않으며, JWT를 헤더에 추가하여 실기 때문에 OPTIONS가 발생할 수 밖에 없다고 판단하였다. 또한 모두 응답속도를 엄청 중요하게 생각하는 기능들이 있지는 않아서 그냥 진행하기로 하였다! 역시 협업,, 혼자 공부하는 것보다 팀 프로젝트를 통해서 정말 많이 알게되는 것 같아 너무 좋다 🤓
Ref.
NUKEGUYS BLOG
멋진홍홍
Wonit
