[Vue] 새로고침 시 404Error / Connect-history-api-fallback

 

새로고침을 했는데 404 에러가 떴다.

찾아보니, SPA 이라서 발생한 에러라고 한다.

SPA는 단일 html 페이지를 로드하고, JavaScript를 통해 페이지의 콘텐츠를 동적으로 변경하여 사용자에게 

여러 페이지가 있는것 처럼 보이게 한다. 

 

이는 클라이언트 사이드 라우팅(Client Side Routing)으로 구현된다.

클라이언트 사이드 라우팅을 통해 사용자가 웹사이트에서 다른 주소로 방문 하려 할 때 서버에게 새로운 HTML파일 요청을 막고 클라이언트에서 JavaScript를 이용해 다른 주소를 방문한 것처럼 만들게 해준다.

필요한 컨텐츠만 동적으로 불러오기 때문에 부드러운 화면 전환이 가능한 것!

 

즉 하나의 파일(html)만을 사용하는데 사용자가 새로고침을 하거나 주소창에 직접 입력을 하면, 

해당 파일을 찾으려고 해버려서 웹서버는 파일을 찾지 못하고 404 에러를 반환하게 되는 것이다.

 

 

이런 에러를 Connect-history-api-fallback이라고 한다.

---

해결하기 위해서 Connect-history-api-fallback 미들웨어를 사용하면 된다.

 

먼저 install을 해준다.

npm install --save connect-history-api-fallback

 

라이브러리 가져오기.

var history = require('connect-history-api-fallback');

미들웨어 추가하기

var connect = require('connect');

var app = connect().use(history()).listen(3000);

 

나는 Express와 함께 사용해서 아래처럼 입력해주었다!

var express = require('express');

var app = express();
app.use(history());

 

SPA에서 뒤로가기, 새로고침 시 404 Not Found

 

History API는 가라! 이제는 Navigation API의 시대가 온다 - 재그지그의 개발 블로그