개요

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를 요청할 수 있었다.

개요

vue project 개발 중 로컬에서 앱 시작 시 오류 발생하며, 처음 페이지 로딩 시 콘솔에 아래의 로그가 표시됨.

GET <http://localhost:3000/@id/__x00__plugin-vuetify:components/VDivider/VDivider.sass> net::ERR_ABORTED 404 (Not Found)
chunk-GGIT7KZK.js:46 
        
GET <http://localhost:3000/@id/__x00__plugin-vuetify:components/VImg/VImg.sass> net::ERR_ABORTED 404 (Not Found)
chunk-GGIT7KZK.js:49 
        
GET <http://localhost:3000/@id/__x00__plugin-vuetify:components/VResponsive/VResponsive.sass> net::ERR_ABORTED 404 (Not Found)

오류 환경

OS : Windows 10 Enterprise

Vue 3.3.0 + Vuetify 3.0 + typescript

npm run dev 실행

오류 내용 분석

로그를 읽어보면 vuetify의 sass 파일을 찾지 못해 페이지를 보여주지 못하는 것으로 보인다. 관련 내용으로 구글링 해보자.

오류 확인

관련 이슈를 vuetify 공식 github 페이지에서 찾았다.

https://github.com/vuetifyjs/vuetify/issues/7950

나의 경우 위 포스팅의 아래 댓글을 확인하여 해결 했다.

1. node_modules 제거rm -r .\\node_modules\\
2. package-lock.json 제거rm -r .\\package-lock.json
3. "sass": "1.32.13"
4. devDependency 섹션 아래 package.json에 한 줄을 추가합니다 .

오류 수정

내 코드의 경우 프로젝트 생성 시 아래처럼 1.69.0 버전으로 추가 되었다.

이를 1.32.13으로 수정해주니 더이상 문제가 발생하지 않았다.

버전 충돌로 인하여 발생한 문제 같다.