[Vue.js] CORS Preflight OPTIONS 메서드

CORS Preflight OPTIONS 메서드

Spring boot Interceptor에서 요청 header에 담긴 토큰 검증하는 로직을 추가했습니다. 그런데 정상 토큰이 넘어와도 CORS 에러가 발생했습니다. 처음엔 웹에서 토큰을 헤더에 잘 못 넘긴것으로 판단하고 Vue 코드를 보았는데 F12 개발자 도구로 보면 headers에 토큰이 잘 담긴 걸 확인했습니다.

문제는 서버 Interceptor handler에서 HttpServletRequest를 받을 때 header에 토큰이 넘어오지 않는다는 것입니다. 찾아본 결과 Preflight OPTIONS 메서드가 넘어올 때 headers에 토큰이 담아오지 않기 때문에 당연히 토큰 유효성 검증을 통과못하는 거라고 합니다.

그래서 Http 요청 메서드가 OPTIONS일 경우 검증 로직을 통과하도록 해주니 정상작동 했습니다.

public class UserAuthInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
        if (HttpMethod.OPTIONS.matches(request.getMethod())) {
            return true;
        }
    }
}

MDN 문서에서 CORS preflight request는 서버가 CORS 프로토콜이 작동될 수 있는 환경을 갖췄는지 메서드와 헤더를 체크하는 요청이라고 합니다. 요청이 통과되면 실제 API를 호출하게 됩니다.

이 메서드의 종류는 OPTIONS인데 3가지 요청헤더 요소들이 들어갑니다. 바로 Access-Control-Request-Method, Access-Control-Request-Headers, and the Origin header 입니다.

CORS preflight를 발생시키지 않는 요청들이 있는데, simple requests라고 합니다. 그 조건은 아래를 모두 만족시켜야 합니다.

1) GET, HEAD, POST 중 하나의 메서드인 경우
2) 헤더에 Accept, Accept-Language, Content-Language, Content-Type들로만 이루어져 있을때(Content-Type은 application/x-www-form-urlencoded, multipart/form-data, text/plain만 허용됩니다.)

---

참고자료

• 개인블로그 - 1. Login Interceptor의 도입과 CORS 에러
• MDN - CORS