spring interceptor CORS preflight 이슈

문제

Spring으로 API서버를 구축하였다. postman으로 API 호출할 때는 잘 호출 되었는데 react를 이용해 SPA를 만들었고, 웹브라우저에서 ajax로 API를 호출할 때 CORS 문제가 발생하였다. 서버쪽에서 origin 설정 등 전부 해주었는데 CORS문제가 발생하였고 단순 CORS 설정 문제인 줄 알고 많은 시간을 할애하였다.

원인

웹 요청인 경우 도메인이 허용된 것인지를 먼저 확인하는 Preflight Request로 OPTIONS가 먼저 날라가고 허가된 경우 본 요청이 날라가서 API를 호출해오게 된다. 요청 헤더에 JWT토큰을 넣어 보냈음에도 OPTIONS 요청 헤더에는 토큰이 NULL이여서 spring interceptor 부분에서는 사용자를 인증할 수 없어 401을 내보냈으나 브라우저에서는 CORS 문제라고 표시되었던 것

preflight란?

preflight는 우리말로 하면 말 그대로 미리 보내는 것 , 사전 전달이라고 할 수 있는데 기본적으로 브라우저는 cross-origin 요청을 전송하기 전에 OPTIONS 메소드로 preflight를 전송한다. 이때 Response로 Access-Control-Allow-Origin과 Access-Control-Allow-Methods가 넘어오는데 이는 서버에서 어떤 origin과 어떤 method를 허용하는지 브라우저에게 알려주는 역할을 한다. 이러한 요청은 웹에서만 나타나는 사항으로 CORS와 밀접하게 연관되어있다. 그래서 브라우저에서 요청을 보냈을 때만 이러한 문제가 발생했던 것이다.

해결방법

이번에 알게된 점으로 먼저, OPTIONS 요청에서는 사용자 인증을 하지 않는다는 것이다.
OPTIONS인 경우 인터셉터에서 사용자 인증을 하지 않도록 토큰 검증 인터셉터를 수정하였다.

public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
            throws Exception {
    	if(request.getMethod().equals("OPTIONS")) {
    		return true;
    	}
        ...