[Error] Vue와 express 통신시 백엔드에서 나타나는 오류 해결하기
문제 발생
백엔드에서 실행시 이러한 오류가 나면서 실행이 안되었다. 이 때 통신을 하는 것을 못 받아와서 그런가보다 하고 넘겼다. 그런데 프론트에서 할 때는 이러한 오류가 안 나서 검색을 해보았다.
문제 해결
서브 페이지에서 새로 고침하면 404 뜨는 건 개발 초기에 vue 문제라는 것을 알아냈다. 미들웨어 connect-history-api-fallback를 사용하면 이러한 오류가 없어진다.
1) 모듈 설치
npm install --save connect-history-api-fallback
모듈을 백엔드가 있는 폴더로 가서 설치해야 한다.
2) 모듈 넣기
var createError = require('http-errors');
var express = require('express');
var path = require('path');
const history = require('connect-history-api-fallback'); //여기
var cookieParser = require('cookie-parser');
var logger = require('morgan');
const session = require('express-session');
vue를 위한 express가 설치되면 기본적인 위치는 저렇게 되어 있다. 이를 path모듈 밑에 history변수를 넣어준다.
app.use(history()); //여기
app.use(express.static(path.join(__dirname, 'public'))); // 반드시 여기 위에 use 쓸 것!
그리고 ctrl + f를 쳐서 검색창을 띄운 뒤에 정적인 파일이 로딩되기 전에 history를 실행시켜준다.
추가
connect-history-api-fallback에 대한 설명
npmjs에 있는 설명을 보면
단일 페이지 애플리케이션(SPA)은 일반적으로 웹 브라우저에서 액세스할 수 있는 하나의 인덱스 파일(대개 index.html. 그런 다음 애플리케이션의 탐색은 일반적으로 HTML5 History API 의 도움으로 JavaScript를 사용하여 처리됩니다 . 이로 인해 사용자가 새로고침 버튼을 누르거나 방문 페이지가 아닌 다른 페이지에 직접 액세스할 때(예: /help웹 /help/online 서버가 색인 파일을 우회하여 이 위치에서 파일을 찾을 때) 문제가 발생합니다. 애플리케이션이 SPA이므로 웹 서버는 파일 검색 시도에 실패하고 사용자에게 404 - 찾을 수 없음 메시지를 반환합니다.
→ 파일을 제대로 찾지 못 했을 때 404에러가 뜬다고 되어 있다.
처리 방식
프론트엔드가 구성된 경로를 백엔드로 보내주었을 때, 백엔드에서 이에 맞는 경로를 찾지 못했을 경우에 history 미들웨어가 실행된다. 원래는 이렇게 경로를 찾지 못하면 해당요청이 404page를 나타내는 것이다. history 미들웨어가 실행됨으로 404 page가 안 보이고 제대로 경로를 찾아주는 것 같다.