단순 요청(Simple requests), 프리플라이트(Preflight requests) 요청? 왜 axios 요청이 자동으로 두번이 되는지..에 대해(preflight cors)

SpringBoot + Vue.js 로 RestAPI 방식의 사이드 프로젝트를 하는도중에 

로그인 시 할일 목록으로 자동으로 끌고 오도록 해놓았는데, 그때 제대로 끌고 오질 못해서 네트워크 패널을 보니

 

 

요청이 두번? 들어가 있었다. 

우선 왜 두번인지 부터 해결하고 가야겠다고 생각했고, 열심히 검색해 보았다.

 

 

출처 : developer.mozilla.org/ko/docs/Web/HTTP/CORS

 

 

HTTP CORS 관련 공식문서를 보면 이 요청은 사용자 정의 헤더가 설정되어서

자동으로 preflighted 처리가 된다.

 

 

 

나의 OPTIONS 요청 overview

 

맞다. 나는 헤더에 토큰값을 실어 보낸다고, 헤더에 임시로 Authorization  : (Token 값) 을 추가해 두었는데,

그것 때문에 Simple Request -> Prefilghted Request로 변환되서 요청이 들어갔고,

prefilghted 요청이 됨으로 인해, OPTIONS 요청에는 Token값이 들어가지 않음으로 권한이 없는 403 error가 되었다.

 

 

자 이제, 왜 두번요청인지는 알았고, OPTIONS 요청에 대해서는 Token 값을 검사하지 않도록 설정하면,

해결이 될꺼 같다! 

 

 

 

"OPTIONS 방식이면 다 허가하겠다" 추가 

 

끝