Vue3 Axios 사용 시 CORS + 504(Gateway Time-out)

개요

vue를 통해 front-end측 로직 처리 중 이상한 오류가 발생하여 공유한다. api 호출 시 특정 상황에서 CORS 오류가 발생하는데, CORS 오류와 함께 504 에러가 발생하는 것이다. 서버측 CORS 설정은 한참전에 완료되었기 때문에 다른 문제라고 바로 생각이 들어서, CORS + 504 에러가 발생하는 경우로 검색해봤다.

아래의 블로그가 나와 비슷한 현상이 발생하는것 같아서 적용해보니 해결할 수 있었다.

504 (Gateway Timeout) 에러 해결 (AWS EB, Node.js)

또한 CORS와 함께 504 에러가 발생하는 이유는 아래의 글에서 확인할 수 있었다.

https://github.com/kubernetes/ingress-nginx/issues/2134

정리

문제의 원인은 nginx측에서 기본적으로 proxy 연결 시간이 60초로 설정되는데, 이 시간이 넘어가면서 nginx측에서 504 에러를 리턴한 것이다. 그와 더불어 504 에러를 리턴할 때에 header에 CORS 관련 정보가 포함되지 않아 두 오류가 동시에 발생하는 것이다.

따라서, nginx측 오류만 수정한 후 다시 시도하니 성공적으로 API를 요청할 수 있었다.