vue router history mode 404 GET 문제 해결하기!

 

 history Mode의 고질적인 문제, 404 오류! 

 

 

이전 Vue 페이지 이동 시 스크롤 복구하기 포스팅에서 언급했던 히스토리 모드의 오류를 해결하는 포스팅을 작성하고자 한다. 주소에서 해쉬뱅을 빼기위해 사용하는 히스토리 모드, 하지만 이 모드로 router를 사용하게되면 고질적인 문제에 봉착하게 된다.

 

페이지를 가져올 수 없다며 404 오류 페이지가 뜬다

 

바로 해당 주소를 직접 사용자가 입력하여 접속하려한다면 뜨게 되는 404 오류! 이 오류는 해쉬뱅 모드에선 일어나지 않는 오류지만 히스토리 모드에선 빈번하게 일어나는 오류이다. 이 오류는 도대체 왜 일어나는 것일까?

 

 

 

 

---

 

 도대체 뭐가 문제인거야? 

 

 

이 문제는 애초에 Vue 자체의 문제이기도 하다. Vue에서는 기본적으로 url 직접 접근이 불가능하다. 그 이유는 vue는 싱글 페이지 클라이언트 앱이기 때문이다. Vue Router는 프론트의 요청에 따라 새로운 돔을 변경하는 것이 아닌, 브라우저에 변화가 있는 부분만 돔을 변경한다. 그러니깐 실제적인 페이지에 서버가 할당되지 않았는데 해당링크를 직접 작성하여 접속하니 생기는 문제인것이다. 그래서 vue는 기본적으로 포괄적으로 뜰 수 있는 404 오류페이지를 설정할 것을 권장한다. 해당 부분은 공식문서를 참고하면 좋다. 하지만 우리의 목적은 404 페이지로 이동하는것이 아닌, 해당 router 페이지로 이동하고 싶은것이다. 

 

 

 

---

 

 문제를 해결해보자! 

 

>> webpack.config.js

devServer: {
    historyApiFallback: true,
  },
  
  
  >> packge.json >> scripts
  
  "start": "webpack-dev-server --inline --content-base . --history-api-fallback"

이 방법은 웹팩을 빌드했을경우의 해결방법이다. 이부분을 참고해서 읽어주셨으면 한다. 조금 어이없을정도로 해결방법은 간단한데, devServer에 historyApiFallback: true 을 작성해주는것이다. historyApiFallback은 url 이외의 url 경로로 접근했을때 404 responses를 받게 되는데 이때도 index.html을 서빙할지 결정하는 옵션이다. 이 기능을 이용하여 미지정 경로로 이동했지만, 해당 상태에 맞는 적절한 경로로 이동할 수 있게 된다. 

 

(사실 이 오류는 react에서도 일어날 수 있는 오류다. 만약 react에서도 동일한 오류가 난다면 dev에 해당 코드를 작성하자)

 

 

 

 

 

참고문서 : wkdtjsgur100.github.io/react-router-deploy/

React Router에서 특정 URL 접속 시 페이지를 찾을 수 없는 문제 원인 및 해결 방법(nginx, node express, apa

참고문서 : m.blog.naver.com/kangminser88/221146020394

[Node.js] express와 vue.js 환경설정

참고문서 : router.vuejs.org/kr/guide/essentials/history-mode.html

HTML5 히스토리 모드 | Vue Router